Directory structure

eWizard CLI creates the files and directories within your e-Detailer project directory.

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

.
├─.ewizard/
|  └─settings.json
├─build/
|  └─dev/
|    ├─app.js
|    ├─editor.js
|    ├─index.js
|    └─templates.js
├─common/
|  ├─blocks/
|  ├─blocks-library/
|  ├─components/
|  |  └─components.json
|  ├─resources/
|  |  └─references.json
|  ├─i18n/
|  |  └─common.json
|  ├─media/
|  |  ├─fonts/
|  |  ├─images/
|  |  ├─pdfs/
|  |  └─videos/
|  ├─styles/
|  | ├─fonts.css
|  | ├─import.css
|  | ├─main.css
|  |   └─theme.css
|  └─metadata/
|     └─triggeredEmail.json
├─extensions/
|  ├─globalComponents.js
|  └─store.js
├─node_modules/
├─slides/
|  └─default/
|    ├─media/
|    |  └─images/
|    └─index.vue
├─store/
|  ├─actions.js
|  ├─mutations.js
|  └─index.js
├─themes/
├─.gitignore
├─App.vue
├─icon.png
├─icon@2x.png
├─index.html
├─package-lock.json
├─package.json
├─readme.md
├─settings.json
└─structure.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 file or directory	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.
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 is created when you run the development build. This file is referenced in index.html.
build/dev/editor.js	The JavaScript bundle that is used in eWizard Editor.
build/dev/index.js	The project's JavaScript entry point that is created when you run the development build. This file is referenced in index.html.
build/dev/templates.js	The JavaScript bundle that is used in eWizard Editor. The bundle displays slides 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 components files. For more details, see Components development.
common/components/components.json	Contains the list of components to be displayed in the eWizard Editor sidebar.
common/i18n/	Contains localization files in the JSON format.
common/i18n/common.json	Global localization of text on all slides. Eliminates the need to localize the same text on individual slides.
common/resources/references.json	The text in external documents that you can reference in the slides.
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.
common/metadata/triggeredEmail.json	Contains information about the emails and email fragments created from the slide. Add the directory manually, to use triggered emails. For more information, see Triggered emails.
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 slide.
node_modules/	The npm packages installed for the project. You can install the project dependencies by running the wiz install command.
slides/	Contains the slides directories in which slide appearance and logic are defined in the vue components. Each slide has its own directory named as the slide id. The media resources of a particular slide are stored in the media subdirectory of that slide.
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.
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 slides (menu, footer, logo). 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. See e-Detailer settings.
structure.json	Specifies the e-Detailer structure and the slides display order.

*[Single File Component]: A style of application organization used by JavaScript UI libraries where each file represents a single component.

*[entry point]: An entry point indicates which module webpack should use to begin building out its internal dependency graph.