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:
- Quickstart to set up Stripe and Magic.
- How the React client side is built.
- 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 ππ»ββοΈ β‘.
Top comments (0)