Detailed merixstudio coding guidelines can be found here
Only requirement is to install Node.js.
Please be sure you have Node.js and npm (node package manager that comes along with Node) in your OS enviroment path so it can be run from command line interface.
If you work on Windows the default paths are:
C:\Program Files\nodejs\
C:\Users\<user_name>\AppData\Roaming\npm\
When installing Node you can choose to add them for you automatically.
To manage dependencies please use Yarn that can be downloaded here.
To install all required local dependencies mentioned above run this command in the project root (where package.json file is located):
yarn install
This will install all the required modules in node_modules folder. This folder is not versioned and has to be installed manually by everyone working on the project.
To run build process and start development server simply run:
npm start
To automatically open the page in a default browser you can add parameter:
gulp --open
Also you can choose the browser (--open parameter is unnecessary):
gulp --chrome
gulp --firefox
Gulp is finding icons.zip file to add them to project. You can change options in config.js file. Also you can change path to zip in console:
gulp --icons new/path/to/icons.zip
Gulp is responsible for the whole compiling and bundling process. All Gulp tasks are defined in the gulp folder.
Compiled and bundled files are stored in _build dir that is created when Gulp tasks are started (those files are not versioned).
Gulp tasks are responsible for:
- Copying all static files (fonts, images, html) in the directory to
_build - Compiling Nunjucks templates from
templates/to HTML files in_build/ - Compiling
*.scssSass files fromstyles/to one CSS file in_build/styles/main.css - Bundling them into one file using Browserify to
Browserifyto_build/scripts/main.js
The default command for running gulp tasks is:
npm start
that needs to be run in project root where package.json file is located.
This will run gulp in dev mode that additionally starts a dev server on http://localhost:1337 and watches for file changes so it can reload the page on each save. Dev server is created with BrowserSync.
There is also another npm command for compiling files for production environment:
npm run production
This command does not start a dev server and it minifies all the styles and scripts. This command should be used when building files for backend integration.
├── _build/ * contains built project
├── fonts/ * contains fonts and icon fonts used in the project (without fonts imported from Google Fonts / Typekit)
├── gulp/ * contains gulp tasks definitions
├── images/ * contains images used in the project
| └── placeholders/ * contains all image placeholders
├── media/ * contains other media files that can be uploaded by the user or admin (documents, videos, etc.)
├── scripts/
| ├── site.js * contains Site class with find and parseContent methods
| ├── components/ * all elements in the website should be divided into independent modules, so all scripts for modules should be defined in separate files in this directory
| ├── polyfills/ * fill the gap between the browser and technology
| ├── utils/ * contains common functions
| └── vendors/ * all scripts required by the external libraries
├── styles/
| ├── main.scss * contains only imports of partial files described below
| ├── base/ * contains all base styles of the website
| ├── components/ * all elements in the website should be divided into independent modules, so all styles for modules should be defined in separate files in this directory
| ├── layout/ * styles related with the main elements of the website eg.: footer, header, grid, forms, wysiwyg editor
| ├── pages/ * styles needed by specific sub page if it can't be put into module
| ├── utils/ * contains mixins and variables
| └── vendors/ * all styles required by the external libraries
└── templates * contains all HTML templates files
To use Merix Jenkins modify file
Jenkinsfile
Find
merix-template
and replace it with your project name
To build docker image use command
docker-compose -f dev.yml build
After docker build finishes successfully, run image by command
docker-compose -f dev.yml up
To open your app use http://localhost:1337 (also works on your local ip)