Deploying Vue.js + Node + MySQL + NginX app

Hello everyone, I have set up Ubuntu droplet with UFW, MySQL, Node, Vue-Cli, and NginX.

I have created an “apps” folder inside “html”


apps folder contains two folders:


Inside codvue folder, I cloned the Vue app and for codnode folder, I cloned the node api (uses port 3001)

Here are NginX server blocks (or whatever they are called) settings.

Default server config:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html/apps/codvue/dist;

       # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;
        error_page 404 /;

        location / {
                try_files $uri $uri/ =404;


Created another server block named node:

server {
        listen 81 default_server;

#       # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name IPADDRESS;
        error_page 404 /;

        location / {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_set_header Host $http_host;
                proxy_cache_bypass $http_upgrade;
                proxy_redirect off;


Both the Default and node are linked to sites-enabled…

The issue that I’m currently experiencing is:

When I go to /var/www/html/apps/codvue/ and create a build using:

sudo npm run build

After restarting Nginx service, I open the website using the IP address, the interface of the app loads just fine (means Vue is working, correct?). Alongside I’m running the Node app in another terminal which says running at port 3001 and Db connection successful.

But other than the Vue interface no data is shown. front end working. Backend NOT Displaying. When I try to access this URL: http://IPADDRESS:81/Api/category/categories-list it shows the data:

[{"catID":1,"catName":"sabdasdv1","catDesc":"qdjqbwd","isActive":"1","date":"2020-03-05T00:51:24.000Z"},{"catID":3,"catName":"Books","catDesc":"Paid","isActive":"1","date":"2020-03-05T00:38:22.000Z"},{"catID":4,"catName":"Testing one","catDesc":"","isActive":"1","date":"2020-03-05T00:38:22.000Z"},{"catID":48,"catName":"wejbw","catDesc":"","isActive":"1","date":"2020-03-05T00:38:22.000Z"},{"catID":50,"catName":"Best friend 2","catDesc":"","isActive":"1","date":"2020-03-05T00:38:22.000Z"},{"catID":51,"catName":"testcat","catDesc":"","isActive":"1","date":"2020-03-05T00:38:22.000Z"}]

Now I go back to /var/www/html/apps/codvue/ and execute the following command: sudo npm run serve

The app is served on port 8080. When I open the http://IPADDRESS:8080, the app loads just fine… Both the interface and the data is there.

Can someone please guide me on how can I get the build version to work? What am I doing wrong here?

Below is the Vue config file:

const path = require('path');

module.exports = {
    // outputDir :path.resolve(__dirname, '../server/public'),
                target: 'http://IPADDRESS:81'

I have a feeling that I’m missing a very small but important piece of this puzzle to make this thing work with Vue’s Build version.

Any sort of help will be highly appreciated. Thank you for your time in reading it to the end.

Thanks again!

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

Any help will be highly appreciated. I am new to this and not sure where the issue is.