Build a Paid Membership Site with Magic and Stripe: Pt. 4 - Deploy to Heroku

This is the final part of the Build a Paid Membership Site with Magic and Stripe series. Make sure to read the following articles before proceeding:

1. Quickstart to set up Stripe and Magic.
2. How the React client side is built.
3. How the Node server side is built.

Deploying to Heroku

Create a Project

🚀 Want to deploy your app on Heroku? First, install the Heroku CLI. Then run heroku create to generate a new Heroku project. It will return your Heroku app URL, similar to what is shown below.

$ heroku create

Creating app... done, ⬢ cryptic-waters-25194
https://cryptic-waters-25194.herokuapp.com/ | https://git.heroku.com/cryptic-waters-25194.git

Set Config Vars (.env)

Now let's set the production .env variables for our app. Locate your new project on Heroku and go to Settings. In Heroku, we set up .env variables under Config Vars. Click Reveal Config Vars and enter both of your client and server side environment variables.

Update Server.js

Add the following into your server.js file so that Heroku knows how to build your app.

/* File: server.js */

// For heroku deployment
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

Update Package.json

In package.json, add this to the scripts object:

/* File: The server's package.json */

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

Now you can run the following commands to deploy your application:

$ git add .
$ git commit -m 'your message'
$ git push heroku master

Heroku should have given you a link to your live app. Congrats! 🎉

Outro

That's it for today! If you'd like more tutorials on Stripe x Magic, (e.g. how to create a subscription membership website) please let us know in the comments section below.

Until next time 🙋🏻‍♀️ ♡.