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

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:

Node + Express + Lets Encrypt

How to use SSL/TLS with nodejs

Stack overflow posts and probably a whole lot more I am forgetting right now.

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!

asked Jan 2 at 15:27

Kevin Vugts

352517

add a comment |

General information about my setup

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:

Node + Express + Lets Encrypt

How to use SSL/TLS with nodejs

Stack overflow posts and probably a whole lot more I am forgetting right now.

What do I want to achieve?

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

asked Jan 2 at 15:27

Kevin Vugts

352517

add a comment |

General information about my setup

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:

Node + Express + Lets Encrypt

How to use SSL/TLS with nodejs

Stack overflow posts and probably a whole lot more I am forgetting right now.

What do I want to achieve?

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

asked Jan 2 at 15:27

Kevin Vugts

352517

General information about my setup

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:

Node + Express + Lets Encrypt

How to use SSL/TLS with nodejs

Stack overflow posts and probably a whole lot more I am forgetting right now.

What do I want to achieve?

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

node.js reactjs heroku

asked Jan 2 at 15:27

Kevin Vugts

352517

asked Jan 2 at 15:27

Kevin Vugts

352517

asked Jan 2 at 15:27

Kevin Vugts

352517

asked Jan 2 at 15:27

Kevin Vugts

352517

asked Jan 2 at 15:27

Kevin Vugts

352517

add a comment |

1 Answer
1

active

oldest

votes

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'));

});

edited Jan 3 at 23:00

answered Jan 3 at 2:58

MediaBytes

113

That makes sense! But what about the SSL certificate part in order to provide https? :)

– Kevin Vugts
Jan 3 at 12:52

You can provide the https module with an optional object as the first parameter. Take a look here: sitepoint.com/how-to-use-ssltls-with-node-js

– MediaBytes
Jan 3 at 22:50

mate... please have a quick look in the question, I already have read that article but the problem is not creating the ssl or providing, but do I need 1 certificate and use them on both separate servers? Or do I need to create different SSL certificates? Do you know?

– Kevin Vugts
Jan 4 at 10:02

Haven't heard back from you. Could you please answer my question?

– Kevin Vugts
Jan 19 at 20:14

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54008965%2fhow-to-install-ssl-for-the-following-setup-react-frontend-nodejs-backend-cu%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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);

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'));

});

edited Jan 3 at 23:00

answered Jan 3 at 2:58

MediaBytes

113

That makes sense! But what about the SSL certificate part in order to provide https? :)

– Kevin Vugts
Jan 3 at 12:52

You can provide the https module with an optional object as the first parameter. Take a look here: sitepoint.com/how-to-use-ssltls-with-node-js

– MediaBytes
Jan 3 at 22:50

mate... please have a quick look in the question, I already have read that article but the problem is not creating the ssl or providing, but do I need 1 certificate and use them on both separate servers? Or do I need to create different SSL certificates? Do you know?

– Kevin Vugts
Jan 4 at 10:02

Haven't heard back from you. Could you please answer my question?

– Kevin Vugts
Jan 19 at 20:14

add a comment |

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);

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'));

});

edited Jan 3 at 23:00

answered Jan 3 at 2:58

MediaBytes

113

That makes sense! But what about the SSL certificate part in order to provide https? :)

– Kevin Vugts
Jan 3 at 12:52

You can provide the https module with an optional object as the first parameter. Take a look here: sitepoint.com/how-to-use-ssltls-with-node-js

– MediaBytes
Jan 3 at 22:50

mate... please have a quick look in the question, I already have read that article but the problem is not creating the ssl or providing, but do I need 1 certificate and use them on both separate servers? Or do I need to create different SSL certificates? Do you know?

– Kevin Vugts
Jan 4 at 10:02

Haven't heard back from you. Could you please answer my question?

– Kevin Vugts
Jan 19 at 20:14

add a comment |

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);

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'));

});

edited Jan 3 at 23:00

answered Jan 3 at 2:58

MediaBytes

113

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);

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'));

});

edited Jan 3 at 23:00

answered Jan 3 at 2:58

MediaBytes

113

edited Jan 3 at 23:00

answered Jan 3 at 2:58

MediaBytes

113

answered Jan 3 at 2:58

MediaBytes

113

answered Jan 3 at 2:58

MediaBytes

113

That makes sense! But what about the SSL certificate part in order to provide https? :)

– Kevin Vugts
Jan 3 at 12:52

You can provide the https module with an optional object as the first parameter. Take a look here: sitepoint.com/how-to-use-ssltls-with-node-js

– MediaBytes
Jan 3 at 22:50

mate... please have a quick look in the question, I already have read that article but the problem is not creating the ssl or providing, but do I need 1 certificate and use them on both separate servers? Or do I need to create different SSL certificates? Do you know?

– Kevin Vugts
Jan 4 at 10:02

Haven't heard back from you. Could you please answer my question?

– Kevin Vugts
Jan 19 at 20:14

add a comment |

That makes sense! But what about the SSL certificate part in order to provide https? :)

– Kevin Vugts
Jan 3 at 12:52

You can provide the https module with an optional object as the first parameter. Take a look here: sitepoint.com/how-to-use-ssltls-with-node-js

– MediaBytes
Jan 3 at 22:50

mate... please have a quick look in the question, I already have read that article but the problem is not creating the ssl or providing, but do I need 1 certificate and use them on both separate servers? Or do I need to create different SSL certificates? Do you know?

– Kevin Vugts
Jan 4 at 10:02

Haven't heard back from you. Could you please answer my question?

– Kevin Vugts
Jan 19 at 20:14

That makes sense! But what about the SSL certificate part in order to provide https? :)

– Kevin Vugts
Jan 3 at 12:52

You can provide the https module with an optional object as the first parameter. Take a look here: sitepoint.com/how-to-use-ssltls-with-node-js

– MediaBytes
Jan 3 at 22:50

mate... please have a quick look in the question, I already have read that article but the problem is not creating the ssl or providing, but do I need 1 certificate and use them on both separate servers? Or do I need to create different SSL certificates? Do you know?

– Kevin Vugts
Jan 4 at 10:02

Haven't heard back from you. Could you please answer my question?

– Kevin Vugts
Jan 19 at 20:14

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu