Presentation¶

Web_blabla is my boilerplate for web projects.

It tends to be JAMstack compliant, i.e. that most of the code is in the front-end and could be delivered by CDN. The back-end should be reduced to the minimum, ideally a pure static sever. Real back-end functionalities are delivered via a REST API. The front-end should be easily transformed into an electron app, NW app or PWA.

All distributed files must be generated by transpilation to help to find bugs early and get proper code. The following languages are used:

• pug for HTML
• Sass for CSS
• TypeScript for JavaScript

HTML5, CSS3 and ES6 are targeted even if they might restrict the compatibility with old browsers.

This documenation is also available on readthedocs. An instance of this website is accessible at https://blabla.billet.ovh

Requirements¶

This project has been developed nodejs and npm:

> node -v
v12.16.2
> npm -v
6.14.4

To upgrade your npm version, you can try:

sudo npm i -g npm

Additional requirements:

sudo apt install rst2pdf evince curl
pip install --user pipenv

Getting Started¶

In a bash terminal, type:

npx degit charlyoleg/web_blabla my_foo_project
cd my_foo_project
npm install
npm upgrade
npm run
npm run intall_py
# rename the project
find . -iname "*web_blabla*"
grep -i web_blabla -r .
# initiate the git repo
git init
git add .
git commit -m 'first commit'
git remote add origin git@github.com:charlyoleg/my_foo_project
git push --set-upstream origin master
git pull
git push

Dependencies¶

You can check the node-package dependencies with:

npm ls --depth=0
npm ls --prod --depth=0
npm ls --dev --depth=0

ToDo¶

Presentation¶

The goal of web_blabla is to provide me a boilerplate for my web projects.

OVH Virtual Server¶

OVH proposes price competitive virtual server called VPS. It is a complete Ubuntu server, where you can install anything, inclusive nodejs.

Web_blabla environment variables¶

This boilerplate express application reads several environment variables:

• NODE_ENV (it also influences express behavior)
• HTTP_ENABLE (http is only used for redirecting to https)
• PORT_NUM
• KEY_FILE
• CERT_FILE

Server Preparation¶

adduser bob
groups bob
usermod -aG sudo bob

ssh-copy-id bob@vps12345.ovh.net
ssh bob@vps12345.ovh.net

sudo npm i -g pm2

pm2 startup # and follow the instructions

systemctl list-units --type service --all | grep pm2
systemctl status pm2-bob
ps aux | grep pm2
pm2 ls

npm i pm2
npx pm2 ls
npx pm2 logs blabla
npx pm2 stop blabla
npx pm2 kill

sudo apt-get install libcap2-bin
which node
ls -l /usr/bin/node
sudo setcap cap_net_bind_service=+ep /usr/bin/node

Starting the apps¶

In the VPS-terminal:

NODE_ENV='production' HTTP_ENABLE=1  pm2 start node backend/dist/web_blabla_app.js --name blablae
pm2 ls
pm2 save
pm2 logs blablae
sudo reboot
pm2 stop blablae
pm2 restart blablae
ps aux | grep pm2

To update the systemd startup scripts:

pm2 unstartup
pm2 startup

Access log¶

The web_blabla express app uses the middleware morgan to log the http-requests. The log-files are stored under backend/log/ and can be analyzed with goaccess for example.

sudo apt install goaccess
cd web_blabla
goaccess backend/log/access.log --log-format=COMBINED
goaccess backend/log/access.log --log-format=COMBINED -a -o web_blabla_access_report.html
sensible-browser web_blabla_access_report.html

DNS Records¶

Use the wildcard ‘*’ to redirect all the non-registered subdomains to a server-IP.

In a bash terminal, test the DNS registry:

host mydomain.ovh
host www.mydomain.ovh
host blabla.mydomain.ovh
host abc.mydomain.ovh
host abc.mydomain.ovh
host abc.mydomain.ovh
host abc.ddd.mydomain.ovh