Setting up devserver with https

[glararan]

Hi,

First of all.. I am new to razzle / react / webpack stuff. I decided to start with react so I am moving small website blazor -> react.

I am using razzle for SSR.

What is actually not working?

I managed to get working scss plugin after upgrading to newer version. I can see in source code linking, however images nor css appears in build folder.

Website code:
(head)
<link href="/css/app.min.css" type="text/css" rel="stylesheet"/>
(body)
<img src="https://localhost:3001/static/media/house.1fe534c3.jpg" alt=""/>

Source code for body (Home.js):

...
import House from "./images/house.jpg";

class Home extends React.Component
...
render()
...
<img src={House} alt="" />
...

Source code for app (App.js):

....
import './scss/app.module.scss';
...

.babelrc

{
    "presets": [
        "razzle/babel"
    ],
    "plugins": [
        "@loadable/babel-plugin"
    ]
}

razzle.config.js

const path = require('path');
const LoadableWebpackPlugin = require("@loadable/webpack-plugin");

module.exports = {
    plugins: ["scss"],
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: false,
                        },
                    },
                ],
            },
        ],
    },
    modifyWebpackConfig: (opts) =>
    {
        const config = Object.assign({}, opts.webpackConfig);
        const target = Object.assign({}, opts.env.target);
        const dev = Object.assign({}, opts.env.dev);

        if (dev)
        {
            if (target === 'node')
            {
                config.plugins = config.plugins.filter(p => p.constructor.name !== 'HotModuleReplacementPlugin');
                config.entry = config.entry.filter(e => e !== 'webpack/hot/poll?300');
            }
            else if (target === 'web')
            {
                config.devServer.https = true;
                config.devServer.pfx = process.env.RAZZLE_PFX;
                config.devServer.pfxPassphrase = process.env.RAZZLE_PFX_PASSPHRASE;
            }

            config.output.publicPath = config.output.publicPath.replace('http://', 'https://');
        }
        else if (target === 'node')
            config.externals = [];

        if (target === "web")
        {
            const filename = path.resolve(__dirname, "build");

            config.plugins.push(
                new LoadableWebpackPlugin({
                    outputAsset: false,
                    writeToDisk: { filename },
                })
            );
        }

        return config;
    },
};

razzle version 3.4.5

[fivethreeo]

That is razzle 4 config, module is not a option in razzle config, the Object assigns are wrong

[glararan]

That is razzle 4 config, module is not a option in razzle config, the Object assigns are wrong

Eh.. its didnt work either without module section. Its 100% 3.4.5. Previously I used 3.0.0.. after upgrade it said modify is deprecated so I had to move to modifyWebpackConfig.

How it should be correctly? Can you give me lead? Thanks

[fivethreeo]

https://codesandbox.io/s/razzle-examples-basic-forked-k0xjb?file=/razzle.config.js
https://codesandbox.io/s/razzle-examples-basic-forked-k0xjb?file=/package.json

[glararan]

based on your config if I dont use Object.assign then config.entry.filter results into error "is not a function".

any advice?

[fivethreeo]

config.entry.server

[glararan]

Compile is now success.. thanks

however still not copied image assets nor css. Additionaly, HMR is broken. Maybe its really not config.entry.server?

F:\ASP.NET Core\Razzle\ClientApp\build\webpack:\(webpack)\hot\poll.js:36
        throw new Error("[HMR] Hot Module Replacement is disabled.");
^
[HMR] Hot Module Replacement is disabled.
    at Object../node_modules/webpack/hot/poll.js?300 (F:\ASP.NET Core\Razzle\ClientApp\build\webpack:\(webpack)\hot\poll.js:36:1)
    at __webpack_require__ (F:\ASP.NET Core\Razzle\ClientApp\build\webpack:\webpack\bootstrap:25:1)
    at Object.0 (F:\ASP.NET Core\Razzle\ClientApp\build\server.js:5840:1)
    at __webpack_require__ (F:\ASP.NET Core\Razzle\ClientApp\build\webpack:\webpack\bootstrap:25:1)
    at F:\ASP.NET Core\Razzle\ClientApp\build\webpack:\webpack\bootstrap:116:1
    at Object.<anonymous> (F:\ASP.NET Core\Razzle\ClientApp\build\server.js:121:10)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)

[fivethreeo]

Need to see the config

[glararan]

const path = require('path');
const LoadableWebpackPlugin = require("@loadable/webpack-plugin");

module.exports = {
    plugins: ["scss"],
    modifyWebpackConfig: (opts) =>
    {
        const config = opts.webpackConfig;
        const target = opts.env.target;
        const dev = opts.env.dev;

        if (dev)
        {
            if (target === 'node')
            {
                config.plugins = config.plugins.filter(p => p.constructor.name !== 'HotModuleReplacementPlugin');
                config.entry.server = config.entry.server.filter(e => e !== 'webpack/hot/poll?300');
            }
            else if (target === 'web')
            {
                config.devServer.https = true;
                config.devServer.pfx = process.env.RAZZLE_PFX;
                config.devServer.pfxPassphrase = process.env.RAZZLE_PFX_PASSPHRASE;
            }

            config.output.publicPath = config.output.publicPath.replace('http://', 'https://');
        }
        else if (target === 'node')
            config.externals = [];

        if (target === "web")
        {
            const filename = path.resolve(__dirname, "build");

            config.plugins.push(
                new LoadableWebpackPlugin({
                    outputAsset: false,
                    writeToDisk: { filename },
                })
            );
        }

        return config;
    }
};

[fivethreeo]

Running in wsl? Also you remove the hmr so..

[fivethreeo]

Razzle start does not output css in dev. Does the css in js in dev. You can turn it on in dev with razzle options. See the docs for valid options.

I recommend not setting output publicpath and using CLIENT_PUBLIC_PATH as a .env variable with https://localhost:port/ instead

Also note that https can cause cors issues between ports. I would reccomend trying to just get the basic with-scss example working first before fiddeling with https in dev, i spent a long time getting https working in dev so as a beginner, put a hold on https in dev

[fivethreeo]

Also make sure razzle plugins and razzle are the same versions

[glararan]

@fivethreeo I have to use https due my asp.net core force https.. If I would use http then it would result into http(s) mistmatch.

razze plugins / razzle are same versions.

Not running in WSL (if u mean windows subsystem for linux)

HMR: If I use code with Object.assign above then HMR is working.. why is that?

publicpath: thanks for tip.. I removed publicPath code

output css/images: I guess youre right.. after I used command npm run build then css and image assets are generated..

however loadable-stats.json file is no longer generated which results into error.. lol.. at https://razzle-git-three-jared.vercel.app/ cant exactly find proper settings for deploy media assets :/

[fivethreeo]

const path = require('path');
const LoadableWebpackPlugin = require("@loadable/webpack-plugin");

module.exports = {
    plugins: ["scss"],
    modifyWebpackConfig: (opts) =>
    {
        const config = opts.webpackConfig;
        const target = opts.env.target;
        const dev = opts.env.dev;

        if (dev)
        {
            if (target === 'node')
            {
            }
            else if (target === 'web')
            {
                config.devServer.https = true;
                config.devServer.pfx = process.env.RAZZLE_PFX;
                config.devServer.pfxPassphrase = process.env.RAZZLE_PFX_PASSPHRASE;
            }
        }
        else if (target === 'node')
            config.externals = [];

        if (target === "web")
        {
            const filename = path.resolve(__dirname, "build");

            config.plugins.push(
                new LoadableWebpackPlugin({
                    outputAsset: false,
                    writeToDisk: { filename },
                })
            );
        }

        return config;
    }
};

[fivethreeo]

https://github.com/jaredpalmer/razzle/blob/master/examples/with-single-exposed-port/razzle.config.js

[glararan]

const path = require('path');
const LoadableWebpackPlugin = require("@loadable/webpack-plugin");

module.exports = {
    plugins: ["scss"],
    modifyWebpackConfig: (opts) =>
    {
        const config = opts.webpackConfig;
        const target = opts.env.target;
        const dev = opts.env.dev;

        if (dev)
        {
            if (target === 'node')
            {
            }
            else if (target === 'web')
            {
                config.devServer.https = true;
                config.devServer.pfx = process.env.RAZZLE_PFX;
                config.devServer.pfxPassphrase = process.env.RAZZLE_PFX_PASSPHRASE;
            }
        }
        else if (target === 'node')
            config.externals = [];

        if (target === "web")
        {
            const filename = path.resolve(__dirname, "build");

            config.plugins.push(
                new LoadableWebpackPlugin({
                    outputAsset: false,
                    writeToDisk: { filename },
                })
            );
        }

        return config;
    }
};

thanks.

loadable-stats is now generated!
However HMR now works differently.. previously I just saved and browser did auto-refresh. Now I have to manually. What's the catch?

Also if I run npm run build and then npm run start assets are removed.

https://github.com/jaredpalmer/razzle/blob/master/examples/with-single-exposed-port/razzle.config.js
updated to

    modifyWebpackConfig: (opts) =>
    {
        const config = opts.webpackConfig;
        const target = opts.env.target;
        const dev = opts.env.dev;

        if (dev)
        {
            if (target === 'node')
            {
            }
            else if (target === 'web')
            {
                config.devServer.https = true;
                config.devServer.pfx = process.env.RAZZLE_PFX;
                config.devServer.pfxPassphrase = process.env.RAZZLE_PFX_PASSPHRASE;
                config.devServer.proxy = {
                    context: () => true,
                    target: process.env.CLIENT_PUBLIC_PATH
                };
                config.devServer.index = "";
            }
        }
        else if (target === 'node')
            config.externals = [];

        if (target === "web")
        {
            const filename = path.resolve(__dirname, "build");

            config.plugins.push(
                new LoadableWebpackPlugin({
                    outputAsset: false,
                    writeToDisk: { filename },
                })
            );
        }

        return config;
    }

[fivethreeo]

Target mus be the underlying express server for proxy. also you need to set devserver.public to 'localhost:443'

[fivethreeo]

Then change CLIENT_PUBLIC_PATH to https://localhost/