Razzle: Add PROTOCOL (http, https) to .env

[dvdmgl]

http is hardcoded, allow to be a choice through .env

process.env.PROTOCOL: default http

[vladp]

sorry, if this obvious. but how do you make my environment service HTTPS (I have the SSL certificates already generated)?

Update: I just modified index.js directly (created by create-razzle-app ), and spawned https server, rather than http. hope that was the right way of doing it.

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[jmca]

This should be reopened.

[laurencefass]

Please repoen as razzle is currently broken by default for https sites.

[anthony0030]

I am also interested in HTTPS.

[laurencefass]

https://www.npmjs.com/package/razzle-plugin-proxy.

you can proxy https through nginx for multiple rather than configure individual applications.

install the proxy and follow some file changes... replace ${port...} with your preferred port and domain .com with your reverse proxy server root location.

**.env**

# dev mode with path
PUBLIC_PATH='https://domain.com/razzle-dev/'
CLIENT_PUBLIC_PATH='https://domain.com/razzle-dev/webpack/'
PORT=${port}

# production mode with path (run with start:prod)
# PUBLIC_PATH=https://domain.com/razzle-prod
# PORT=${port+2}

need to set the BrowserRouter basename client.js so you can use '/' as root everywhere else

hydrate(
  <BrowserRouter basename="/razzle-dev">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

configure nginx locations

    # razzle.js locations
    location ^~ /razzle-dev/webpack/sockjs-node/ { 
        proxy_pass http://0.0.0.0:${port+1}/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }     
    location ^~ /razzle-dev/webpack/ {
        proxy_pass http://0.0.0.0:${port+1}/;
        proxy_http_version 1.1;
        as above
    }       
    location /razzle-dev/ {
        proxy_pass http://0.0.0.0:${port}/;
        as above
    }       
    location /razzle-prod/ {
        proxy_pass http://0.0.0.0:${port+2}/;
        as above
    }      

[SuperIRis]

I tried to make this work by editing index.js as @vladp pointed out, but now I'm getting a SockJS error (ERR_SSL_PROTOCOL_ERROR, then the warning that triggers when the socket closes), it seems that the content is not being served by https in the server side for static assets? Not sure exactly what is going on, any experience on something like this?

[SuperIRis]

Just in case it is useful for anyone else, I got it working by adding the files for my cert inside devServer.https config inside razzle.config (same way as in index.js), and overwriting the client public path by adding https (CLIENT_PUBLIC_PATH=https://localhost:3001/) since protocol is hardcoded in createConfig.