Nginx Question posted in
The official documentation can be found here.

How can I connect my NodeJS/Express backend to my VueJS frontend using only one port on my local machine? – Nginx

My Vue app is set up using Vue CLI (Webpack) and it’s working as it should. My NodeJS/Express REST API is also working properly. However, to run them simultaneously I now start a local server for each of them — each with its own port. I would like to have both of them communicate over one port.

Localhost:8080 should point to the home page of my Vue App and the API requests should follow localhost:8080/api/…

In my production environment I use one and the same port/URL by serving the Vue App as a set of static files (‘dist’ folder). In my development environment I don’t know how to set this up, however.

I looked around for answers online, but feel lost among all the different terms I have come across (.env, crossenv, nginx, cors) and that I am running in circles.

What would be a good way of setting this up?

Thank you

Edit:

I ended up creating three modes to run my application:

  1. Development
    I use one script in a package.json to start the frontend and backend server on different ports, using pm2 to run the servers in the ‘background’ rather than blocking further commands in the terminal/cmd. I use configured a proxy inside my vue.config.js to redirect my API calls made in the frontend to the right base URL and used cors as middleware to allow requests to my API from other domains/ports.

  2. Staging
    I use one script in a package.json to build the Vue app into a folder (‘dist’ folder inside my backend folder) that is a collection of static files and start the backend server. My backend is set up to know when I want to go into staging mode and then serve the static files in the ‘dist’ folder.

  3. Production
    I use one script in a package.json to build the Vue app into a folder (‘dist’ folder inside my backend folder) that is a collection of static files and push my backend (incl. the built static files) to Heroku.

Tags:

2

Answers


  1. 0

    Well if you need to run both on the same port you could first build your app so that you receive a dist directory or whatever your output directory is named and set up an express server that serves that app and otherwise handles your api requests

    const express = require("express");

const path = __dirname + '/app/views/';
const app = express();

app.use(express.static(path));

app.get('/', function (req,res) {
  res.sendFile(path + "index.html");
});

app.get('/api', function (req,res) {
  // your api handler
}

app.listen(8080)
    Login or Signup to reply.
  2. 0

    Assuming that node and the ‘app’ will always run on the same server you can just use a template library like ejs.

    You would then just bundle the app and api together, assuming that the front-end is tied to the backend, realistically you would not even need to hit the API as you could just return the records as part of the view, however if dynamic elements are needed you could still hit the API.

    Now, with that said, if the API is something used by many applications then it would probably make sense to build that out as its own microservice, running on its own server and your frontend would be on its own. This way you have separation of concerns with the API and Vue app.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search