Serenity

Internal front-end framework for Immoweb.

Read the Serenity docs

Table of contents

• Quick start
• Dev
• File structure
• Documentation
• Test your changes without releasing

Quick start

• Clone the repo: git@github.com:axel-springer-kugawana/iwb_serenity.git

Dev

Compile CSS (include lint, scss compilation, autoprefixer and minification)

    npm run css

For development purpose (Watch scss files change and launch compilation)

    npm run watch:css

File Structure

Source files are saved inside /src folder. Compiled files are saved inside /dist folder.

iwb_serenity/
├── dist/
│   ├── css/
│   │   ├── serenity.css
│   │   ├── serenity.css.map
│   │   ├── serenity.min.css
│   │   └── serenity.min.css.map
└───┴── src/
        └── scss/
            ├── utils/
            │   └── ...
            └── serenity.scss

Documentation

Serenity documentation can be consulted in the /docs folder or online (thanks to GitHub Pages.

Running the documentation locally

1. Make sure you have Node.js and npm installed.
2. Run npm ci to install Node.js dependencies.
3. Run npm start to compile CSS and JavaScript files, generate the docs, and watch for changes (which is suitable for development) or npm run docs:build to build the documentation website in /doc/.vuepress/dist.
4. To browse the documentation:

• If you ran npm start, you can browse the documentation on http://localhost:8080.
• If you ran npm run docs:build, the documentation website is in /doc/.vuepress/dist.

Deploying the documentation

Thanks to a GitHub action, the documentation website is automatically deployed when a release tag is created.

To trigger a deployment at another moment:

1. Go to Actions / Deploy Documentation.
2. Click Run workflow, let the default branch on master and click Run workflow.
3. Wait a couple of seconds for the dispatched action to appear in the list below the button.

Test your changes without releasing

To test your changes in a real-world project before publishing a new version of Serenity, use the npm link feature.

In the following how-to, Serenity Project refers to your local Serenity source, Your Project refers to your local project that use Serenity.

1. Inside Your Project, manually delete node_modules/iwb_serenity.
2. Inside the Serenity Project, run npm link.
3. Inside Your Project, run npm link iwb_serenity.

Now your project uses the iwb_serenity local version.

To roll back to the default state:

1. Inside Your Project, run npm unlink iwb_serenity.
2. Inside the Serenity Project, run npm unlink.
3. Inside Your Project, eventually reinstall the desired version of serenity (npm install iwb_serenity).