This repo is my go-to template when I want to create an Angular application. This template includes Nebular UI elements, ESLint and Prettier.
In order to run Angular, you will need to install Node.js which also installs the npm package manager. Check the Node version by typing node -v and make sure it is above 10.13 because we want to use Angular 11. Ubuntu is an example of a distro which does not offer the latest version of Node in the regular repos. Look at this askubuntu thread to find out how to get a newer version manually. After that, you can install the Angular CLI. If you want to serve the application through Docker, install Docker and Docker-Compose as well.
Clone this repo, navigate to the cloned repo folder and type npm install or npm i. To take it out for a spin, type ng serve and hit the browser on http://localhost:4200. Use ng serve --host IPADDRESS to make the application reachable from other devices on the same local network. If you want to run the application through https, create the appropriate .key and .crt files and specify their locations in the npm start script in package.json.
Unit tests are included and use Angular's default test framework Jasmine with Karma test runner. Run tests by typing ng test. You will need the binary for the ChromeHeadless browser, i.e. Chrome or Chromium, and set CHROME_BIN. On Linux, this would normally be /usr/bin/google-chrome. The Dockerfile in the folder 'docker-ci' does this automatically and I use this image for unit tests.
End-to-end tests are executed by ng e2e using Protractor. You will need to download chromedriver for the tests to work. Again, this is automatically done in the Dockerfile in 'docker-ci'.
This Angular application is meant to be deployed through Nginx inside a Docker container by the command npm run docker. This is a script located in package.json and it will build a Docker image, remove dangling images and launch the application in a Docker container by Docker-Compose. Both the Docker image and container will be named 'angular-temp' unless changed in package.json.
This repo includes a GitLab CI/CD configuration file which uses the Docker image found in the 'docker-ci' folder. This Docker image includes the chromedriver to run headless during GitLab CI tests. To create the image, type npm run docker-ci from the root project folder. The name of the Docker image may be changed in the 'scripts' section in package.json and needs to be matched up with the name in the .gitlab-ci.yml file. I run my own GitLab server locally and use GitLab Runners for CI/CD operations.
Prettier is a code formatter where you can define formatting rules and apply them with a simple file save. I use it all the time to clean up messy code. To activate in VS Code, go to File -> Preferences -> Settings and search for Format On Save and check the box. You might also need to search for Default Formatter and choose Prettier as the formatter.
The application is prepared to be served in a Docker container through Nginx. It defaults to http (port 80) but can easily be configured for https. You will need to provide a certificate(.crt), certificate key(.key) and a Diffie-Hellman parameter key(dhparam.pem) in 'nginx.conf'. I like to use OpenSSL to create the certificates. To serve through Docker, type npm run docker. This is a script which builds and creates a running Docker container with Docker-Compose. The application will then be available on port 80 and accessible at http://IPADDRESS on the local network. See the details of how it is done in the 'scripts' section of package.json.
The chosen theme is Cosmic but you can change theme if you like.