How to install SSL for the following setup (React Frontend + Nodejs Backend + Custom Domain Heroku)

user_9063004 0
Viewed 2660

General information about my setup

Currently I am building a web application using react and a nodejs API that is providing the data for this web application. Both apps are hosted on heroku.com and run independently from each other. I have bought a custom domain from a different hosting provider and used the heroku custom domain option to point the DNS to my website.

Technical details about my setup

  • NodeJS server: Express
  • NodeJS version: v10.15.0
  • React version: v16.2.0
  • Custom domain: www.tabbs.nl
  • Heroku domain: tabbs-web-app.herokuapp.com

The issue I am experiencing

I have been digging into a lot of documentation and tutorials in order to setup SSL for react / NodeJS but couldn't find a decent tutorial about how to set SSL / security for my setup.

Tutorials I already have read:

What do I want to achieve?

The goal I would like to achieve is setting up a secure connection between React web application (frontend) and NodeJS API (backend) so that all data between those is encrypted and safe. Also I want my custom domain (bought by a different hosting provider than Heroku) to be secure and forced using https.

For any questions or additional information please do not hesitate to ask!

reactjs node.js heroku
2 Answers

Have you tried using the https module in node?

You can do something like this:

var express = require('express');
var https = require('https');
var http = require('http');
var app = express();

http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

The app returned by express() is in fact a JavaScript Function, designed to be passed to Node’s HTTP servers as a callback to handle requests. This makes it easy to provide both HTTP and HTTPS versions of your app with the same code base, as the app does not inherit from these (it is simply a callback.

If you are using create react app, open your terminal and type “npm run build”. This creates a build folder with all of your static files.

Now go back to your node backend service and add the following:

var express = require('express');
var path = require('path');
var https = require('https');
var http = require('http');
var app = express();

const options = {
  key: fs.readFileSync("/srv/www/keys/my-site-key.pem"),
  cert: fs.readFileSync("/srv/www/keys/chain.pem")
};
http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

If you’re using react router to handle routing for you web app then you would amend the GET request as such:

var express = require('express');
const path = require('path');
var https = require('https');
var http = require('http');
var app = express();
const options = {
  key: fs.readFileSync("/srv/www/keys/my-site-key.pem"),
  cert: fs.readFileSync("/srv/www/keys/chain.pem")
};
http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
user_99225100

This ain't a complex issue, do not worry about ssl, just create your own certificate for Node.JS/Express and that's enough.

and, React has a built-in way of doing api calls,

add this line to package.json of your React installation,

"proxy": "http://localhost:8000/"

and just call the api service like this,

 //Generic API Call
 callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);

    return body;
  };

  // A Submit handler to proxy
  handleSubmit = async e => {
    e.preventDefault();
    const response = await fetch('/api/myrequest', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ post: this.state.post }),
    });
    const body = await response.text();

    this.setState({ responseToPost: body });
  };

it all works.

user_49374750
Related