Directory structure

In eWizard.js, a banner has the following project directory.

The eWizard.js project has a robust directory structure. We strongly recommend sticking to it during the development process.

.
├─.ewizard/
|  └─settings.json
├─banners/
|  └─bannner-1/
|    ├─media/
|    |  └─images/
|    └─index.vue
├─build/
|  └─dev/
|    ├─app.js
|    ├─editor.js
|    ├─index.js
|    └─templates.js
├─common/
|  ├─blocks/
|  ├─blocks-library/
|  ├─components/
|  |  └─components.js
|  ├─resources/
|  |  └─references.json
|  ├─i18n/
|  |  └─common.json
|  ├─media/
|  |  ├─fonts/
|  |  ├─images/
|  |  ├─pdfs/
|  |  └─videos/
|  └─styles/
|    ├─fonts.css
|    ├─import.css
|    ├─main.css
|    └─theme.css
├─extensions/
|  ├─globalComponents.js
|  └─store.js
├─node_modules/
├─store/
|  ├─actions.js
|  ├─mutations.js
|  └─index.js
├─templates/
|  └─my-banner/
|     ├─media/
|     └─index.vue
├─themes/
├─.gitignore
├─App.vue
├─icon.png
├─icon@2x.png
├─index.html
├─package-lock.json
├─package.json
├─readme.md
├─settings.json
├─structure.json
└─templates.json

Let's take a closer look at the directories and files.

The project directory structure may differ depending on the selected project template and initialization options.

Source	Description
.ewizard/settings.json	The .ewizard/settings.json specifies the project template type, the path configuration for all the directories, plugin settings, and the template repository.
banners	Contains the banner directories in which banner appearance and logic are defined in the Vue components. Each banner has its own directory named as the banner ID. The media resources of a particular banner are stored in the media subdirectory of that banner.
build/dev/	Stores the compiled project source files. This directory appears only after you run the wiz dev command.
build/dev/app.js	The JavaScript bundle that's created when you run the development build. This file is referenced in index.html.
build/dev/editor.js	The JavaScript bundle that's used in eWizard Editor.
build/dev/index.js	The project JavaScript entry point that's created when you run the development build. This file is referenced in index.html.
build/dev/templates.js	The JavaScript bundle that's used in eWizard Editor. The bundle displays banners from the master template.
common/	Contains all common components, styles, localization, and media resources.
common/blocks/	The directory is used only in the Classic email projects to store the added blocks.
common/blocks-library/	The directory is used in the email projects. In the Classic emails, this is a library of blocks displayed in the Editor. You can add these blocks to your email. In eWizard Editor emails, the blocks-library contains blocks.json and modules.json. These files describe the blocks and modules displayed in eWizard Editor.
common/components/	Stores local Vue component files. For more details, see Components development.
common/components/components.js	Includes the components that are used in the eWizard Editor sidebar and layout. For more information, see Register components with custom styles.
common/i18n/	Contains localization files in the JSON format.
common/i18n/common.json	Global localization of text on all banners. Eliminates the need to localize the same text on individual banners.
common/resources/references.json	The text in external documents that you can reference in the banners.
common/media/	Stores the common media resources: fonts, images, PDF files, and videos. Each type of media resource is stored in its own directory.
common/styles/	Contains the common styles.
common/styles/fonts.css	Use fonts.css to import fonts.
common/styles/main.css	Use main.css to define global styles for the project.
common/styles/theme.css	Use theme.css to define the theme stylesheet variables: colors, indents, etc. Usually, it is an SCSS file.
common/styles/imports.css	Imports all stylesheets on the same level that supplies common styles for the entire project.
extensions/	Stores the globalComponents.js and store.js, in which the project common components and Vuex are registered as global extensions to be available on every banner.
node_modules/	The npm packages installed for the project. You can install the project dependencies by running the wiz install command.
store	This directory is present if you select the Vuex option for the project initialization. The directory contains the Vuex store files.
store/index.js	Exports the Vuex instance. Imports files on the same level with actions and mutation.
store/actions.js	Designed to store Vuex actions.
store/mutations.js	Designed to store Vuex mutations.
templates	The folder with individual banners designed to fit your required sizes. Each banner directory must include an index.vue file with markup and the media folder with common media resources: fonts, images, PDF files, and videos.
themes/	Contains themes for the project template. Each theme is in its own directory. The directory name is the same as its theme.
.gitignore	Specifies the files and directories that are not synced with Git.
App.vue	A Single File Component where you add all the common components for your banners: button, text, or image. It contains 3 chunks of code: HTML, CSS, and JavaScript.
index.html	The main HTML file that serves as an entry point of the entire project and allows you to run the project as a single-page application. It includes the main project view and contains the JavaScript bundles that are produced by eWizard CLI.
package.json	Stores general information about the project and contains the list of project npm dependencies.
package-lock.json	Provides the version information for all packages installed into node_modules by the npm client.
readme.md	Stores useful development information and hints.
settings.json	Specifies the project settings depending on the template type. For more information, see Banner settings.
structure.json	Specifies the banner template structure and the display order for the template sizes.
templates.json	Defines a collection of banner templates designed to fit your required sizes for future re-use. Each individual banner template features a unique identifier, display name (shown in the Create new popup), dimensions, and device pixel ratio for scaling. Here, you also define their display order in the Create new popup.