Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by whitelisting our website.

Host Nodejs Express and Vuejs Application in Apache WebServer in Ubuntu

I am working on an Oracle Content Management Headless website with Vuejs. I am using Docker for the development environment but our server is on Oracle Cloud Service. The client send me the cred for the Ubuntu server which has an apache2 web server installed. I deployed the code and faced issues when build and start the project because it starts to port 8080 but the apache server is configured to port 80. So I follow the below steps to fix the issues and configure and run the project successfully.

Target: We will host our node express and Vuejs application on the Apache web server. We already have the Apache2, node installed on Ubuntu Server. I am hoping you are already connected to Ubuntu Server through SSH.

  1. Install PM2
  2. Add PM2 to the startup script
  3. Start the express application
  4. Start the app with PM2
  5. Check the application on the browser
  6. Enable the Proxy modules with Apache
  7. Create/Update Apache Configuration/Host file for the node application
  8. Restart the Apache2 server


Install PM2:

PM2 is a daemon process manager that will help us to manage and keep the application live 24/7.

npm install -g pm2


Add PM2 to the startup script:

When the ubuntu server restart then PM2 should start automatically. For that, we are adding pm2 in our system startup script.

sudo pm2 startup systemd


Start the express application:

We can start our node express application as below

cd /var/www/html/app

npm run build // build the application

node dist/server/serverBundle.js // Oracle CMS Headless vuejs app


node dist/index.js // for other application

Bu this running the app and waiting for the watch, we want to run the app/process in the background to continue our other tasks. That’s why we will follow the next step.


Start the app with PM2

pm2 start dist/server/serverBundle.js   // Oracle CMS Headless vuejs app


pm2 start dist/index.js // for other application


Check the application on the browser: 



Enable the Proxy modules with Apache:

Now our application is running on the port 8080, but we have to show it on 80. So, now we are going to enable the proxy modules on Apache2

sudo a2enmod proxy

sudo a2enmod proxy_http

We will restart the server at the end..


Create/Update Apache Configuration/Host file for the node application:

Navigate the configuration file and update according to the following file

sudo vi /etc/apache2/sites-available/default.conf

Press “i” to start editing.

<VirtualHost *:80>

ServerName your-domain.com
ServerAlias www.your-domain.com
ServerAdmin webmaster@your-domain.com

ProxyPreserveHost On

ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/

<Directory “/var/www/html/app”>

AllowOverride All



Press the “ESC”  and “:wq” keys to save the changes and close the file.


ProxyPreserveHost: This makes Apache pass the original Host header to the backend server. This makes the backend server aware of the address used to access the application.

ProxyPass: this directive specifies the mapping of the incoming requests to the backend server. In our case, it specifies that everything under the root (/) should be mapped to the backend server at the given address http://localhsot:8080/.

ProxyPassReverse: same as the ProxyPass configuration. It tells the Apache to modify the response headers from the backend server. This makes sure that if the backend server returns a location redirect header, the client’s browser will be redirected to the proxy address and not the backend server address, which would not work as intended.


Restart the Apache2 server:

sudo systemctl restart apache2


Now check the http://your-domain.com on any browser, your app is available and working.


Hope this information is helpful and saves your time. You can share this article because sharing is caring 🙂


#DevOps #HappyCoding #SharingIsCaring

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Wordpress Social Share Plugin powered by Ultimatelysocial