Have you ever wondered how a React blog could work while consuming a Strapi API? Strapi is a 100% Javascript, fully customizable, and developer-first open-source headless CMS. Using Strapi, building self-hosted, customizable, and performant content APIs is more approachable than ever before.
In this tutorial, you’ll learn how to deploy a React blog on Netlify that fetches content from a Strapi instance, which will be deployed on Heroku, which is a cloud platform where you can host a Strapi server for free.
Deploy a New Strapi Instance to Heroku
To deploy your Strapi instance you’ll need:
- A free Heroku account to run Strapi
- A free Cloudinary account to host and deliver image assets
The Cloudinary account is required because Heroku will restart at least once a day, which would remove any files not tracked in source control (e.g. uploaded blog post images).
Once you have your Heroku and Cloudinary accounts set up, click here to deploy a new Strapi instance on Heroku.
Once you have created your new Strapi instance, copy its URL for the next step.
Deploy Your React Blog Frontend on Netlify
To deploy your React blog frontend you’ll need:
Netlify allows for a one-click deployment experience by cloning and deploying the starter repository. Click here to deploy the Strapi React Blog starter to Netlify.
#react
