Configuring NGINX server for UI release
Introduction
The UI web server needs a reverse proxy server. We choose the NGINX server because it provides both a server and a reverse proxy all in one. There are some steps in order to deploy the UI application for production:
- Make some code adjustments
- Build the application for production
- Install the NGINX server
- Configure the web site and the reverse proxy
The instructions below were tested on Ubuntu 20.04, but should also work also on newer versions.
These instructions apply to the ErpFrontend and the ErpDocumentRenderer.
Before building the UI for production
When building the Angular application for production, some optimizations (class name mangle) are turned off. This is because the constructor.name is used in some parts of the code and when the mangle option is active, it messes up the class name and some of the UI functionality might not work anymore.
In order to turn these optimisations off, you need to modify some configurations in the Angular builder’s source code found in node_modules because the build application does not offer any other acces to these settings. Search for the term ‘mangle‘ make it false. You need to search for the term ‘keepNames‘ and make it true.
Below are the modified lines in our build, found in node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js that disables the class name mangle:
...
mangle: false, // this is commented out to disable mangle >>> environment_options_1.allowMangle && platform !== 'server',
...
keepNames: true, // this is commented out to keep class and variable name >>> !environment_options_1.allowMangle || platform === 'server',
...These configurations might be located in other file or location, depending on the Angular version. The example above is for Angular CLI 12.
Building for production
After applying the steps mentioned before, run the following command in a terminal opened in <root_UI_project_path> to build for production:
ng build
Note: on older versions of Angular you needed to run ng build -c production or ng build –prod. By default, on newer versions of Angular the build command defaults to the production environment.
After building the UI application, you need to copy the files located in the distribution folder to a folder on your server. Usually the files are located in <root_UI_project_path>/dist/ErpFrontend. Copy the ErpFrontend folder only.
Installing NGINX
Run the following commands in terminal to install NGINX:
sudo apt update sudo apt install nginx
Configuring NGINX
Navigate to /etc/nginx/sites-enabled:
cd /etc/nginx/sites-enabled
We need to add a file that enables our website(s). The ErpFrontend and the ErpDocumentRenderer projects already provides two NGINX configuration files: erpfrontend_production and erpfrontend_staging.
Modify the files according to your needs and server configuration:
- change the user name
- change the site path
- change the server IP addresses and ports (if needed)
Copy the file to the specified folder then restart the NGINX server:
sudo service nginx restart
The ERP project contains some script files that automatically copy the configuration file from the release folder to the NGINX configuration folder and restarts the NGINX server.
More info about NGINX installation and reverse proxy configuration can be found here:
