Examples on deployment on Azure?

[charlie632]

I'm trying to deploy a razzle app to an Azure App Service but I'm having trouble running the server. I built the app and got a build folder. Then, I used this web.config file and changed the entry points to build/server.js. The app seems to run ok, because I checked the logs and the classic

🚀 started

appears. When I go to the url of the app, there's no response whatsoever. Just an error 500 when the request times out.

I checked the build on my local machine running

node build/server.js

and everything works as expected.

Hope you can help.

Regards.

[fabianishere]

Hi,

This is most probably related to #356 (environmental variables such as PORT are being inlined during build time). IISNode specifies the named pipe to listen on via PORT, but this does not get picked up by the server, as Razzle will inline the access to process.env.PORT (probably to 3000) during build time.

We use this workaround in razzle.config.js to prevent inlining PORT:

module.exports = {
    ...
    modify: (config, { target, dev }, webpack) => {
        const appConfig = Object.assign({}, config);

        // @BUG: Do not inline certain env vars; https://github.com/jaredpalmer/razzle/issues/356
        if (target === 'node') {
            const idx = appConfig.plugins.findIndex(plugin => plugin.constructor.name === 'DefinePlugin');
            const { definitions } = appConfig.plugins[idx];
            const newDefs = Object.assign({}, definitions);
            
            delete newDefs['process.env.PORT'];
            delete newDefs['process.env.HOST'];
            delete newDefs['process.env.PUBLIC_PATH'];

            appConfig.plugins = [].concat(appConfig.plugins);
            appConfig.plugins[idx] = new webpack.DefinePlugin(newDefs)
        }

        return appConfig;
    },
};

[vbutani]

Hi,

This is most probably related to #356 (environmental variables such as PORT are being inlined during build time). IISNode specifies the named pipe to listen on via PORT, but this does not get picked up by the server, as Razzle will inline the access to process.env.PORT (probably to 3000) during build time.

We use this workaround in razzle.config.js to prevent inlining PORT:

module.exports = {
    ...
    modify: (config, { target, dev }, webpack) => {
        const appConfig = Object.assign({}, config);

        // @BUG: Do not inline certain env vars; https://github.com/jaredpalmer/razzle/issues/356
        if (target === 'node') {
            const idx = appConfig.plugins.findIndex(plugin => plugin.constructor.name === 'DefinePlugin');
            const { definitions } = appConfig.plugins[idx];
            const newDefs = Object.assign({}, definitions);
            
            delete newDefs['process.env.PORT'];
            delete newDefs['process.env.HOST'];
            delete newDefs['process.env.PUBLIC_PATH'];

            appConfig.plugins = [].concat(appConfig.plugins);
            appConfig.plugins[idx] = new webpack.DefinePlugin(newDefs)
        }

        return appConfig;
    },
};

I tried this config but when I try command 'npm run start:prod' on my local, I get an error that assets.json not found. could you please advise in this?

[fabianishere]

@vbutani
Does it work if you comment out the line where we delete ‘process.env.PUBLIC_PATH’ from the definitions?

[vbutani]

@vbutani
Does it work if you comment out the line where we delete ‘process.env.PUBLIC_PATH’ from the definitions?

Thanks @fabianishere for the quick response. My bad, while doing code change suggested, I found my custom code issue in modify method.
Your code totally works fine without any change!! The custom config created by you replaces the hard coded PORT value with process.env.PORT in bundled server.js.

Thanks a lot. :)