demo (en-US) - demo (fr) - changelog

• Run it in development
  • Local Node.js
  • VSCode Chrome debugger
• Run it in production
  • Containerized
  • Local Node.js
• Contribute
  • Git flow
  • Create a release
  • Documentation
  • Internationalization
  • Performances monitoring
• Make it yours

Run it in development

Local Node.js

You can run this project in watch/debug mode in local dev environment, to do so you need Node.js (14.15.4).

Example :

# install dependencies
npm i
# run in development mode, default language
npm run start
# run in development mode, in french
npm run start:fr

VSCode Chrome debugger

If you use Visual Studio Code You can easily launch this app in debug mode, you need this extension (automatically added if you accept recommended extensions), and Google Chrome. Follow this guide to know more. All settings are already done in .vscode folder.

Use Chromium instead of Chrome on Linux distros

create an alias with this command : sudo ln -s /usr/bin/chromium /usr/bin/google-chrome, path can be different on your distro !

Run it in production

Containerized

You can run this project in production mode in container, to do so you just need Docker.

Example :

# with docker only
docker build -t ng-start .
docker run --name ng-start -d -p 80:80 -p 443:443 ng-start

# if you have Docker AND Node.js installed you can use short commands :
npm run docker:build:prod
npm run docker:prod

Note: If your host machine is not running on Linux you maybe should not have a node_modules folder before starting to build containers, some packages do not work the same on different OS.

Local Node.js

You can build this project and serve it in production mode directly on your development environment, to do so you need Node.js (14.15.4).

Example :

# install dependencies
npm i
# build in production mode (contains all languages)
npm run build:prod
# serve built project with http-server package (or whatever your want)
npx http-server ./dist/ng-start/

Contribute

Git flow

This project respects Conventional commits, a Git commit convention made by the Angular team. Basically, every pull request should end up with one commit and a standardized commit message.

To easily respect this convention a tool is provided: Commitizen-cli.

Example :

# add your changes
git add .
# commit with commitizen-cli
npm run cz
# push changes
git push

# if your commit fail you can perform changes and retry with previous message
npm run cz -- --retry

Create a release

This project respects Semantic Versioning specification. This allows the automatic generation of CHANGELOG.md file.

To easily respect this specification a tool is provided: Standard-version.

Note: commit or stash any changes before create a release.

Example :

# add your changes
git add .

# use standard-version, commit all staged changes
npm run release
# OR
npm run release:alpha

# push your changes, keep version tag
git push --follow-tags

# (optional) update lighthouse badges with :
npm run lighthouse && git add ./docs
git commit -m 'docs(lighthouse): readme lighthouse badges updated'

When you perform a release you automatically perform the following actions :

• increment version number in package.json (uses the fix: and feat: tags to establish the semantic versioning)
• add a git tag
• build Github Pages demo
• update CHANGELOG.md

Documentation

• Code documentation: this project use Compodoc a documentation tool for Angular & Nestjs applications. It generates a static documentation of your application.

Example :

# code documentation: build doc website and open it
npm run doc

Internationalization

This project is available in multiple languages, it implements Angular internationalization. If you run it in containerized mode Nginx server redirects users to the correct version of the app, according to their browser language.

When you add/modify/delete a localized string in project you have to update locale to generate new messages.xlf file and translate the new string in messages.{fr,others}.xlf file(s).

Example :

# update locale
npm run locale

When you update locale you automatically perform the following actions :

• update messages.xlf with angular built-in internationalization module
• merge messages.xlf and messages.fr.xlf using ngx-i18nsupport-lib

Performances monitoring

# analyze your angular webpack bundle
npm run analyze

# check lighthouse score
open https://web.dev/measure

Make it yours

• clic on Use this template from this Github repo and clone your project
• open your project with your favorite IDE, and replace ALL ng-start occurrence in folder tree with your project name
• set package.json version to 0.0.0
• delete CHANGELOG.md and .git
• you're good to go :)