eWizard.js: messenger ad directory struсture

eWizard CLI creates the files and directories within your messenger ad project directory.

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

.
├─.ewizard/
|  └─settings.json
|  └─assets.json
├─build/
|  └─dev/
|    ├─app.js
|    ├─editor.js
|    ├─index.js
|    ├─state.js
|    └─templates.js
├─common/
|  ├─blocks/
|  ├─blocks-library/
|  |  ├─default-block
|  |  └─blocks.json
|  ├─components/
|  |  └─components.json
|  ├─i18n/
|  |  └─localization.json
|  ├─media/
|  |  ├─images/
|  |  └─fonts/
|  ├─metadata/
|  |  └─targetMessenger.json
|  └─styles/
|    └─main.css
├─extensions/
|  └─common.js
├─node_modules/
├─pages/
|  └─default/
|    └─index.vue
├─themes/
├─.eslintrc.js
├─.gitignore
├─App.vue
├─thumb.png
├─index.html
├─package.json
├─package-lock.json
├─pages.json
├─preview.jpg
├─readme.md
└─settings.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.
`.ewizard/assets.json`	The file is created after adding images and other media assets in the eWizard Editor. It shows the paths to the media assets in your project and in the cloud storage.
`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 generated when you run the development build. This file is referenced in `index.html`.
`build/dev/editor.js`	The JavaScript bundle used in eWizard Editor.
`build/dev/index.js`	The project's JavaScript :Entrypoint:entrypoint: generated when you run the development build. This file is referenced in `index.html`.
`build/dev/state.js`	This file stores the state of the Vue app when you make changes in eWizard Editor.
`build/dev/templates.js`	The JavaScript bundle used in eWizard Editor. The bundle displays pages from the master template.
`common/`	Contains all common components, styles, localization, and media resources.
`common/blocks/`	Use this directory to store the local blocks.
`common/blocks-library/`	Contains the blocks that you add to your messenger ad markup.
`common/blocks-library/blocks.json`	Configuration of the blocks used in the messenger ad markup. The blocks from this configuration file appear in the eWizard Editor Blocks tab.
`common/components/`	Stores the local `vue` components. For more information, see Component development.
`common/components/components.json`	Configuration of the components used in the messenger ad markup. The components from this configuration file appear in the eWizard Editor Components tab.
`common/i18n/`	Contains the localization file in JSON format.
`common/i18n/localization.json`	Global localization of the messenger ad text. Eliminates the need to localize the same text on individual pages of the messenger ad.
`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/metadata/targetMessenger.json`	Contains data about the target messengers for the messenger ad. For more information, see Target messenger settings.
`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.
`extensions/`	Stores the `common.js` file where the common components of the project are registered as global extensions to be available on every page of your messenger ad.
`node_modules/`	The npm packages installed for the project. You can install the project dependencies with the `wiz install` command.
`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 aren't synced with Git.
`App.vue`	A :SingleFileComponent: where you add all the common components for your messenger ad (menu, footer, logo). It contains 3 chunks of code: HTML, CSS, and JavaScript. Use this file if your messenger ad has one landing page.
`thumb.png`	The default icon of the messenger ad scaffolding template.
`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 app. 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.
`preview.jpg`	The preview icon of the generated messenger ad.
`readme.md`	Stores useful development information and hints.
`settings.json`	Specifies the project settings depending on the template type. For more information, see Messenger ad settings.