[question] how to build with development mode

[tuananh]

pwa build is always set to production mode

suppose i want to do a development build with a different variable in DefinePlugin of webpack. How can I do that?

if (production) {
        config.plugins.push(
            new webpack.DefinePlugin({
                MY_API_URL: JSON.stringify('https://api.example.com')
            })
        )
    }
    else {
        config.devServer.https = true

        config.plugins.push(
            new webpack.DefinePlugin({
                MY_API_URL: JSON.stringify('https://devapi.example.com')
            })
        )
    }

[lukeed]

Hey, I'm assuming you mean different API urls for staging vs production server, right?

This is how we do it at work:

const { MY_API_URL, PORT=3000 } = process.env;

exports.webpack = function (config, env) {
  let { webpack } = env;

  config.plugins.push(
    new webpack.DefinePlugin({
      MY_API_URL: JSON.stringify(MY_API_URL || `http://localhost:${PORT}`)
    })
  );
}

Then thru CD (or prepending the command directly) you build for different targets via ENV vars. Of course, you can also set a default on MY_API_URL to be the staging server, for example.

$ MY_API_URL=https://staging.example.com yarn build

Hope that helps!