Directory structure

The social media project has the following files and directories.

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

.
├─.ewizard/
|  ├─assets.json
|  └─settings.json
├─build/
|  └─dev/
|    ├─app.js
|    ├─editor.js
|    ├─index.js
|    └─templates.js
├─common/
|  ├─blocks-library/
|  |  └─blocks.json
|  ├─components/
|  |  └─components.js
|  ├─i18n/
|  |  ├─caption.json
|  |  └─common.json
|  ├─media/
|  |  ├─fonts/
|  |  ├─images/
|  |  ├─pdfs/
|  |  └─videos/
|  ├─resources/
|  |  └─references.json
|  └─styles/
|    ├─fonts.css
|    ├─imports.scss
|    └─main.scss
├─extensions/
├─node_modules/
├─slides/
|  ├─instagram_facebook_post_1/
|  |  ├─media/
|  |  |  └─images/
|  |  |    └─thumb.jpg
|  |  └─index.vue
|  └─instagram_facebook_post_1_video/
|    ├─media/
|    └─index.vue
├─store/
|  ├─actions.js
|  ├─index.js
|  └─mutations.js
├─templates/
|  ├─common/
|  ├─instagram_facebook_post_1/
|  |  ├─media/
|  |  |  └─images/
|  |  |    └─thumb.jpg
|  |  └─index.vue
|  └─linkedIn_post_1/
|    ├─media/
|    └─index.vue
├─.gitignore
├─App.vue
├─icon.png
├─icon@2x.png
├─index.html
├─package.json
├─package-lock.json
├─preview.jpg
├─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 project template.

Source	Description
`.ewizard/settings.json`	The `.ewizard/settings.json` specifies the project type, the path configuration for all the directories, and plugin settings. For more information, see System settings.
`.ewizard/assets.json`	The file is created after adding images and other media assets in 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/templates.js`	The JavaScript bundle used in eWizard Editor. The bundle displays the slide templates.
`common/`	Contains all common components, styles, localization, and media resources.
`common/blocks-library/blocks.json`	Configuration of the blocks that you can add to the slides. 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/i18n/`	Contains the localization files in the JSON format.
`common/i18n/caption.json`	The caption of the social media post. For more information, see Caption and alternative text.
`common/i18n/common.json`	Global localization of text on all slides. Eliminates the need to localize the same text on individual 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/resources/references.json`	The text in external documents that you can reference on the slides and in the post caption. For more information, see References.
`common/styles/`	Contains the common styles.
`extensions/`	Stores the JavaScript files that register global extensions, such as common components, plugins, and the Vuex store, to make them available on every slide. You can name these files as you like.
`node_modules/`	The npm packages installed for the project. You can install the project dependencies with the `wiz install` command.
`slides/`	Contains the slide directories. Each slide has its own directory named as the slide ID. The slide markup is in the `index.vue` file, and the slide media resources and thumbnail are in the `media` directory. For more information, see Slides structure.
`store/`	Contains the `Vuex` store files.
`templates/`	Contains the slide templates that you can add to the post in eWizard Editor. Each template has its own directory named as the template ID. The `templates/common/` directory stores the resources shared between the templates. For more information, see Slide templates.
`.gitignore`	Specifies the files and directories that aren't synced with Git.
`App.vue`	A Single File Component that serves as the root of the social media post. It contains 3 chunks of code: HTML, CSS, and JavaScript.
`icon.png`	The icon of the social media post.
`icon@2x.png`	The large version of the social media post icon.
`index.html`	The main HTML file that serves as an entry point of the entire project. 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 image of the social media post.
`readme.md`	Stores useful development information and hints.
`settings.json`	Specifies the project settings. For more information, see Settings.
`structure.json`	Specifies the slides of the post, their size, and display order. For more information, see Slides structure.
`templates.json`	Specifies the names and sizes of the slide templates. For more information, see Slide templates.

Directory structure ​

Directory structure