How do I connect Vue application to server (Node, MongoDB)?

Question

I've been learning frontend development only and just recently went over basics of Nodejs. I know that I would connect to certain port number when developing in Nodejs alone. However, I'm confused about how I would connect Vue application (built with Vue CLI) to backend since npm run serve will automatically connect to port 8080 by default.

My ultimate goal is to connect MongoDB to my application. Current error I'm getting is Error: Can't resolve 'dns'.

TLDR: Could someone please explain in newbie term how I can connect Vue application with MongoDB?

Answer 1

In my opinion, you have two ways of solving this:
First, there is a field called devServer through which you can tweak the configuration of the dev server that starts up when you run npm run serve. Specifically, you want to pay attention to proxy field, using which you can ask the dev server to route certain requests to your node backend.

Second, depending on your setup, you could use a different host altogether to handle backend calls. For example, as you mentioned, the dev server runs on 8080 by default. You could set up your node backend to run on, say, 8081 and all backend requests that you make in your VueJS app will explicitly use the host of <host>:8081. When you decide to move your code into production, and get SSL certificates, you can have a reverse-proxy server like Nginx redirect all requests from say, api.example.com to port 8081.

As for connections to MongoDB, IMO, here's a question you should be asking yourself:
Is it safe to provide clients direct access to the database?
If the answer is yes, then by all means, ensure the mongoDB server starts with its HTTP interface enabled, set up some access restrictions, update the proxy and/or nginx and you're good to go.

If the answer is no, then you're going to have to write light-weight API endpoints in your NodeJS app. For example, instead of allowing users to directly talk to the database to get their list of privileges, you instead make a request to your NodeJS app via GET /api/privileges, and your NodeJS app will in turn communicate with your database to get this data and return it to the client.
Another added benefit to having the backend talk to your database rather than the client, is that your database instance's details are never exposed to malicious clients.

Here's a sample vue.config.js setup that I have on one of my websites:

const proxyPath = 'https://api.example.com'

module.exports = {
  devServer: {
    port: 8115, // Change the port from 8080
    public: 'dev.example.com',
    proxy: {
      '/api/': {
        target: proxyPath
      },
      '/auth/': {
        target: proxyPath
      },
      '/socket.io': {
        target: proxyPath,
        ws: true
      },
      '^/websocket': {
        target: proxyPath,
        ws: true
      }
    }
  }
}

Here's the nginx config for the same dev server. I quickly pulled what I could from our production config and obscured certain fields for safety. Consider this as pseudo-code (pseudo-config?).

server {
        listen 443      ssl;
        server_name     dev.example.com;
        root            "/home/www/workspace/app-dev";
        set             $APP_PORT "8115";

        location / {
                # Don't allow robots to access the dev server
                if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|Googlebot") {
                        return 404;
                }
                # Redirect all requests to the vue dev server @localhost:$APP_PORT
                proxy_pass $scheme://127.0.0.1:$APP_PORT$request_uri;
                proxy_http_version 1.1; 
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $http_connection;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

server {
        listen 443      ssl;
        server_name     api.example.com;
        set             $APP_PORT "8240";

        location / {
                # Don't allow robots to access the dev server
                if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|Googlebot") {
                        return 404;
                }
                # Redirect all requests to NodeJS backend @localhost:$APP_PORT
                proxy_pass $scheme://127.0.0.1:$APP_PORT$request_uri;
                proxy_http_version 1.1; 
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $http_connection;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}