An Angular 17 todo application with a NodeJS HTTP/HTTPS web server.
Prior to this project, I had little knowledge on the process for deploying an Angular application to a self-hosted production environment. I wanted to broaden my knowledge and explore this topic and this project is the result.
- Clone the repo.
# SSH
git clone git@github.com:JakeBisson8/angular-17-node-deploy.git
# HTTPS
git clone https://github.com/JakeBisson8/angular-17-node-deploy.git
- Install dependencies for Angular project.
npm install
- Change directory to
server/
and Install dependencies for web server.
cd ./server
npm install
- From here you can either choose to run the web server for HTTP or HTTPS by following the steps in their respective sections below. Optionally, you can try running the app in development mode by runnin the following command from the top-level folder.
npm run start
For a quick and easy demonstration you can choose to run the web server using HTTP by following the steps below.
- Build the angular application by running the following command at the top-level folder.
npm run build
- Make a copy of
./server/.env.example
and name it.env
. As we aren't setting up HTTPS, you don't need to modify any values in.env
. - Run the web server.
cd ./server
npm run start
- Navigate to the app in the web browser: http://localhost.
For a longer, but more complete demonstration you can choose to run the web server using HTTPS by following the steps below.
- Build the angular application by running the following command at the top-level folder.
npm run build
- Install openssl following the instructions here: https://tecadmin.net/install-openssl-on-windows/.
- Generate a self-signed SSL certificate and private key following instructions here: https://gist.github.com/taoyuan/39d9bc24bafc8cc45663683eae36eb1a.
- Drop your
.crt
file and.key
file inside of./server/ssl
. - Make a copy of
./server/.env.example
and name it.env
. - Update the
SSL_CERT_NAME
andSSL_KEY_NAME
values inside of.env
to the names of the.crt
and.key
files in./server/ssl
. It must just be the filenames as the server knows to read them from the./server/ssl
folder.
SSL_CERT_NAME="cert.crt"
SSL_KEY_NAME="cert.key"
- Run the web server.
cd ./server
npm run start
- Navigate to the app in the web browser: https://localhost. You will probably get an error from chrome saying the connection is insecure. You can still proceed to the site. This error is due to the fact that we generated a self-signed certificate which is untrusted by the browser for security reasons. Using a valid certificate from a trusted certificate authority would remove this error.
The angular app was built using my own starter template: angular-17-app-template.