How to properly assign development vs production variables?

Question

I don't know how to ask this question, so I will describe what I'm doing, and I'd like some enlightenment.

I'm using node with express for server-side rendering.

When I'm developing the web app, there's a module holding a variable which is shared across all the express routes, instead of hard-coding it.

config.js

module.exports = {
    ipAddress: "http://localhost:8080"
}

index.js route

var config = require("../../config.js");

router
    .get('/', function (req, res) {
        var html = `
            <div class="content">
                <a href="${config.ipAddress}/orders">Orders</a>
                <a href="${config.ipAddress}/invoices">Invoices</a>
            </div>
        `
        res.send(html);
    });

module.exports = router;

When it's time to deploy the app, I manually change the config.js into the server's IP address:

module.exports = {
    ipAddress: "http://255.255.255.255"
}

Another example is the scripts.js file referenced in the HTML head, which handles the DOM changes. Again, the server IP address is placed in the variable.

scripts.js

var ipAddress = "http://localhost:8080"; // To be changed into "http://255.255.255.255"

function placeOrder() {
    fetch(`${ipAddress}/place-order`, {
        method: "POST",
        headers: {
            "Accept": "application/json",
            "Content-type": "application/json"
        }
    })
    .then((res) => res.json())
    .then((data) => xonsole.log(data))
    .catch((err) => console.log(err));
}

document.getElementById("submit-order").addEventListener("click", () => placeOrder());

What is a proper way to handle these variable changes automatically?

Use the [dotenv](https://www.npmjs.com/package/dotenv) package. — Get Off My Lawn, May 23 '18 at 15:19

Jonas Wilms · Answer 1 · 2018-05-23T15:21:38.613

3

One proper way would be to use the processes environment. For example you could switch based on NODE_ENV:

 const ipAdress = process.env.NODE_ENV === "production" ? "http://255.255.255" : "http://localhost";

For sure you could also take a custom variable

const ipAddress = process.env.ORDER_SERVER;

These variables can then be set to different values on different servers.

To pass the changes to clientside javascript you need to write them into the files delivered to the client somewhere on the server. That could be done easily with templates, e.g. ejs.

edited May 23 '18 at 15:21

answered May 23 '18 at 15:17

Jonas Wilms

132,000
20
149
151

Thank you for the response. How about the second part i.e. `scripts.js` served in the HTML head? Would this work too for a file not part of Node? – Ivan May 23 '18 at 15:20
@babevski you have to write it to the clientside files. – Jonas Wilms May 23 '18 at 15:21
I apologize for not marking your answer as correct. You answered my question correctly, but the other one showed me that it wasn't needed in the first place. – Ivan May 23 '18 at 15:44
1

@babevski yes, in this case the other answer is definetly the better solution... You didn't know about relative URLs? °_° – Jonas Wilms May 23 '18 at 15:46
Yeah, I am very ashamed... I have no idea how I've never realized it. – Ivan May 23 '18 at 16:20

score 3 · Accepted Answer · answered May 23 '18 at 15:27

3

Is there a reason for fully qualifying the reference? If your directory structure is the same you could just use relative referencing, for example change '${ipAddress}/place-order' into '/place-order'

answered May 23 '18 at 15:27

Mackija

307
2
14

How to properly assign development vs production variables?

2 Answers2