Webapp - Boilerplate

This repository serves as a boilerplate for jump starting a node js + vue js application.\ Docker will be used extensively to abstract all dependencies from the host OS in a container.\ This makes it easy to work on projects with different software versions and keep the dev environment as close to production as possible. Typescript as a language that compiles to plain JavaScript but helps development will be used. \ The main purpose is to explain a possible development environment for Node JS development and get started quickly.

Concerning the docker-compose commands.

From now on the docker-compose commands are not directly but via yarn docker-compose commands. e.g yarn docker-compose down instead of docker-compose down.

Backend

Documentation for a sample Express Setup can be found in /packages/backend/README.md

Frontend

Documentation for a sample Vue JS Setup can be found in /packages/frontend/README.md

VS Code Dev Environment

To get started install Docker and VS Code. Open VS Code and install the Remote Extension Pack. Thats all the dependencies need. Next clone this repo and open the folder in VS Code. Setup environment variables by adding a docker/.env file, docker/variables.env.dev serves as a template. A popup appears that asks to reopen in container. After clicking that VS Code automatically starts container(s) as defined in .devcontainter/ devcontainer.json and connects VS Code to it. The Language Server and other extensions as well as the integrated terminal are now running inside the container, your files are mounted to that container so you can work without noticing much of that.

Install dependencies

yarn install

Start backend and frontend devservers by running the following command in the root directory:

yarn start

This builds all libs and apps and registers watch tasks for each of them so that code is getting recompiled on changes.

Each lib and app can be started on its own as well (via there own start script) but there might be missing some watch tasks on dependent workspace packages.

Testing

Unit tests

Unit testing is done by jest (ts-jest).

To run all unit test simply run:

yarn run test:unit

Tests are placed inside <module>/tests/unit and should and end with .spec.ts or .test.ts.

Debugging

Backend

node is started with --inspect so a debugger is started by default on port 9229. In VS Code the debugger can be invoced with:

Debug: Attach to Node Proces

TODO

• [ ] decide on using gitlab issue management and which repo (there already exits issues in Node-Boilerplate....)
• [ ] add DOCs to things already working
• [ ] make a list/issues what is still to do