node Vue.js different code scenario if run in dev mode

Question

I have Vue.JS front app with nodeJS backend based on expressJS. ExpressJS also used as web server for statically built Vue.JS app

Front app communicates with express backend via rest and websocket. It uses url host from window.location instance and easily communicates with backend

In production mode, when built application in static expressJS server area, everything work perfect

In dev mode, Vue use it's own web server, and backend urls based on window.location are incorrect because no expresJS on same host and port.

So my question is it possible change some code blocks if running in dev mode ?

Like something this :

if( devmode) 
{
 const url = "http://somebackendhost/rest"
 }
  else {

   const url = location.host ....
  }


}

Answer 1

I will assume you are developing your Vue app using Vue CLI

Changing app behavior depending on environment

In Vue CLI you can use Environment Variables

if(process.env.NODE_ENV === "development")
{
}

This works thanks to Webpack's Define plugin and big advantage is that process.env.NODE_ENV is replaced at build time by the real value. So in production build Webpack will see just if("production" === "development") {} and happily removes the code in optimization phase because it knows this can never be true

Better solution

But I would not use this approach for your problem. Using different API server (not same as the server used for serving Vue SPA) can easily lead to CORS problems

Exactly for this use case, Vue CLI (and Webpack Dev server used under the hood) supports proxying

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:58300/',
        ws: true, // websockets
        changeOrigin: true,
      }
    }
  },
},

This config makes Vue Dev server to proxy any request to /api to other server running at http://localhost:58300/ (your node/express app) and change the origin (so browser thinks response came from the dev server)

All of this can be done without Vue CLI but you will need to set it up by yourself in Webpack config...

Answer 2

The problem

You can't access this information from your browser.

But there are three solutions:

Solution #1

On compilation time create a variable in code which defines devmode (const devmode = true;)

Solution #2

Because your bundler can minify your variable names or changing the scope for security reasons, may be the situation where you can't access it.

So second solution is to define devmode in your localStorage.

Solution #3

Third solution is almost the best.

If you are developing, you are probably accessing your web app via localhost.

location.hostname will return the name of host, so you can make something like:

const devmode = location.hotname == 'localhost';

Best solution

Do not do this. Develop a fully working web app using local REST API and define the URL of REST API in some variable, so when you are preparing your production app, you or compiler just changes the URL adress variable in code of your REST API.

Why is this the best solution? Because it do not impacts your end-user's performance and they will be loading less code, which is the best practise.

Post Scriptum

Don't forget to remove all devmode codepaths when compiling production version!