JavaScript Module folder structure

Project Folder Structure

Simple (basic) project structure

Here’s a very basic project structure that will be most common to most projects.

package.json: the JSON NPM package description
webpack.config.js: the Webpack configuration
images: module images
css: module static stylesheet files
locales: label translation files
src: the directory where all the source files are
definitions.cnd: the content type definition file
.env.example: the default example deployment configuration (see here)
Other folders: static asset folders

Complex (complete) project structure

In the following table, we give a much more detailed and exhaustive description of the possible contents of a project.

File/Folder	Description
`package.json`	NPM project descriptor
`webpack.config.js`	WebPack configuration
`definitions.cnd`	Content node type definitions
`import.xml`	A default JCR import file will be used to import the initial content required by the module.
`css`	Publicly accessible CSS
`images`	Publicly accessible images
`images/template-preview/template.png`	This image will be displayed when selecting the template set to use when creating a new site.
`icons`	Icons for the content types declared in the module. See this resource for more information.
`javascript`	Publicly accessible JavaScript
`src`	Top directory for all JavaScript source code
`src/client`	Top directory for all client-side JavaScript source code
`src/server`	Top directory for all server-side (SSR) JavaScript source code
`src/server/views/[nodeType]/[NodeTypeAndViewName].jsx`	For a given nodeType, the directory and file name structure are recommended. Example: src/server/views/event/EventDefault.jsx
`src/server/templates/page/[PageAndTemplateName].jsx`	For page templates. For a home page template, here is an example: src/server/templates/page/PageHome.jsx
`src/server/templates/[nodeType]/[NodeTypeAndTemplateName].jsx`	For content templates.
`src/server/components/[ComponentName].jsx`	React SSR generic reusable components. Example: src/server/components/Header.jsx, a reusable Header component.
`resources/[module-name]_[language_code].properties`	Java server-side resources bundle. Used to internationalize content node type definitions and other server resources. The `module_name` is the same as the name in the package.json/name property. The `language_code` is an ISO-compliant language code as defined here: https://docs.oracle.com/javase/8/docs/api/java/util/Locale.html
`locales/[language_code].json`	JavaScript JSON resource bundles for internationalization. These are accessible to both the server-side and client-side JavaScript code. The language code is the same as defined for the Java resources.
`settings`	The settings folder may contain resources such as content editor form overrides, configurations, and more
`settings/configurations`	A directory containing module configuration files, either in properties (.cfg) or Yaml (.yml) format. These properties will then be accessible in JavaScript modules through the `server.config.*` helper functions
`settings/jahia-content-editor-forms`	Contains configurations for customizing / overriding Jahia’s automatic content editor form generation.
`settings/rules.drl`	A Jahia Drools rules definition file. These rules use the Drools language syntax to be able to react to events such as a node creation or a property change in the JCR. For more information, you can use this resource.
`settings/import.zip`	Experimental: An import ZIP file that can contain multiple XML files to be imported, such as content initial import (import.xml), permissions (permissions.xml), roles (roles.xml)
`settings/patches`	Experimental: Migrations scripts
`settings/graphql-extension.sdl`	Experimental: Schema Definition Language (SDL) GraphQL extensions.
`settings/jexperience`	Experimental: jCustomer custom objects.

Comparison with Java modules

The structure is not that different from that of Java modules. The following table highlights the main differences. All the other file locations are similar.

JavaScript Modules	Java Modules	Purpose
`package.json / webpack.config.js`	`pom.xml`	Project descriptor
`import.xml`	`META-INF/import.xml`	Initial content import
`definitions.cnd`	`META-INF/definitions.cnd`	Content type definitions
`settings/*`	`META-INF/*`	All other settings