Vue.js frontend, node/express backend (api), multiple deployment

Question

I have a Vue.js application that has access API built on node/express. So I setup a process.env.API_URL to 'localhost' for dev and 'MyProductionServer.url' for prod. But the API_URL variable is loaded at built/compile time.

So now if I am to give the Vue app and backend app to customer. Do I need to ask them for their production server url so that I could edit the API_URL variable and build again? How can I make it dynamically so that when the Vue application start, it load a env variable at runtime instead of compile time?

Does dotenv solve this?

Answer 1

in dotenv or rather in .env file you put your dburl, username and password for accessing that db. On your local comp you would have creds for accessing your local db, while when you upload your app to e.g. heroku, you would not upload .env file, but use Heroku config panel to create same vars you had in .env file just with values for live db. Also add .env to .gitignore

as for api's, your frontend needs to know where backend is located so yeah you need to update that base api url. Since this is backend no way to know the live url where those data would be served, on which web server so you need to update this url manualy once in your frontend and thats all.