Directory structure

eWizard CLI creates the files and directories within your site 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
|    ├─state.js
|    └─templates.js
├─common/
|  ├─blocks/
|  ├─blocks-library/
|  |  └─blocks.json
|  ├─components/
|  |  └─components.json
|  ├─i18n/
|  |  └─localization.json
|  ├─media/
|  |  ├─images/
|  |  └─fonts/
|  └─styles/
|    ├─fonts.css
|    └─main.css
├─extensions/
|  └─common.js
├─modules/
├─node_modules/
├─pages/
|  └─default/
|    └─index.vue
├─themes/
├─.gitignore
├─App.vue
├─icon.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.

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.
.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 entry point 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 site markup.
common/blocks-library/blocks.json	Configuration of the blocks used in the site markup. The blocks from this configuration file appear in the eWizard Editor Blocks tab.
common/components/	Stores local vue components files. For more information, see Component development.
common/components/components.json	Configuration of the components used in the site markup. The components from this configuration file appear in the eWizard Editor Components tab.
common/i18n/	Contains localization file in the JSON format.
common/i18n/localization.json	Global localization of the site text. Eliminates the need to localize the same text on individual pages of the site.
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.
extensions/	Stores the common.js file in which the project common components are registered as global extensions to be available on every page of your site.
node_modules/	The npm packages installed for the project. You can install the project dependencies with the wiz install command.
pages/	Contains the site pages directories in which page appearance and logic are defined in the vue components. Each site page has its own directory named as the page id in the pages.json file. The media resources of a specific page are stored in the media subdirectory of that page. For more information, see Multipage site.
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 aren't synced with Git.
App.vue	A Single File Component where you add all the common components for your site (menu, footer, logo). It contains 3 chunks of code: HTML, CSS, and JavaScript. Use this file if your site has one landing page. In a multiple page site, use the ./common/pages/ directory to store the site pages in individual directories. Also, use the App.vue file for the routing between the site pages. For more information, see Multipage site.
icon.png	The default icon of the site 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 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.
pages.json	The configuration file for the site pages structure. For more information, see Multipage site.
preview.jpg	The preview icon of the generated site.
readme.md	Stores useful development information and hints.
settings.json	Specifies the project settings depending on the template type. For more information, see Site settings.