The Neos Demo Package
This is the default site package installed with the Neos base distribution. With this package, you can quickly have a look into how easy content can be generated and changed. It also shows the basic concepts of how to build a site package with custom node types and plugins.
About the frontend build stack
We included a frontend build stack based on Node.js, NVM, webpack and Yarn. The webpack configuration includes Babel, PostCSS and Sass.
Note: If you want to have a build stack for a Mono-Repo, you can take a look at our Neos.io package.
Installation
Make sure that Node.js and Yarn are installed. It is recommended to use NVM to manage versions of the Node.js versions.
# Enable the correct nvm
nvm use
# Install the package dependencies
yarnCommands
| Command | Description |
|---|---|
yarn build |
Builds all assets |
yarn pipeline |
Runs install and then build all assets |
yarn start |
Watches the sources and rebuilds assets on change |
Package management
The dependencies are stored in the package.json file, so if you edit any config, who need new packages (Like React, Vue.js, TypeScript, etc.), you have to add them to this file. You can read more about this here.
webpack.packages.js
In this file, we set the files we want to render. Currently, we render only one Main.js and Main.css files, but if you're going to have multiple files for your package, here is the point where you can add them.
Explanation of the config files:
| File Name | Explantion |
|---|---|
| .editorconfig | EditorConfig helps maintain consistent coding styles |
| .eslintignore | These files get ignored from ESLint |
| .eslintrc | The configuration file for ESLint, a pluggable JavaScript linter |
| .jshintrc | The configuration for JSHint, a static code analysis tool for JavaScript |
| .nvmrc | This file contains the required Node.js version and is used by NVM |
| .prettierignore | These files gets excluded from the Prettier code formatting |
| .prettierrc | This is the configuration file for Prettier |
| .stylelintrc | This is the configuration file for StyleLint |
| .yarnclean | Cleans and removes unnecessary files from package dependencies |
| babel.config.js | This is the configuration file for Babel. If you want to enable something like React TypeScript or Vue.js, here is the right place to do this |
| package.json | In this file all your dependencies from the build stack are stored |
| webpack.config.js | This is the configuration for webpack |
| yarn.lock | This is the lockfile for Yarn. This is needed to get consistent installs across machines |