eWizard.js e-Detailer directory struсture

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

TIP: The eWizard.js project has a robust directory struсture. 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
|  ├─i18n/
|  |  ├─common.json
|  |  └─references.json
|  ├─media/
|  |  ├─fonts/
|  |  ├─images/
|  |  ├─pdfs/
|  |  └─videos/
|  └─styles/
|    ├─fonts.css
|    ├─import.css
|    ├─main.css
|    └─theme.css
├─extensions/
|  ├─globalComponents.js
|  └─store.js
├─node_modules/
├─slides/
|  └─default/
|    ├─media/
|    |  └─images/
|    └─index.vue
├─store/
|  ├─actions.js
|  ├─mutations.js
|  └─index.js
├─themes/
├─.eslintrc.js
├─.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.

WARNING: The project directory struсture 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 Ultimate Performance 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 Ultimate Performance 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 the Ultimate Performance emails, the `blocks-library` contains `blocks.json` and `modules.json`. These files describe the blocks and modules displayed in eWizard Ultimate Performance 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 Ultimate Performance 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/i18n/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.
`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.
`.eslintrc.js`	The ESLint configuration file with predefined settings for a vue-based project. You can turn off/on the plugin in `.ewizard/settings.json`.
`.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.
`struсture.json`	Specifies the e-Detailer struсture 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.