Strapi Starter React Blog
Tags: react, blog, strapi
Published: 2022-05-06 07:52:11

Strapi is an open-source content management system (CMS) that enables the creation of customizable APIs for any front-end application. Strapi is extremely easy to use because it allows you to create versatile APIs with unique features that you will appreciate. Strapi allows for a great deal of customization. 

## Why did we make these starters?

Starters allow you to quickly visualize the result of the association between Strapi and your frontend framework. It's easier and faster to dig into an existing application to get an idea of the product than to start an application from scratch. As we've made [tutorials](https://strapi.io/tutorials) on how to make a blog with this or that framework, it seemed **useful for the Strapi community** to use the resulting application in order to create starters.

**Goal**

To understand how to create a basic blog with Strapi using React and other application software.

**Prerequisites**  
You'll need a basic understanding of the following to proceed.

- Basic knowledge of JavaScript for Node.js,
- Basic understanding of Strapi - [get started here](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html),
- Downloaded and installed latest [Node.js](https://nodejs.org/en/) v14,
- Basic understanding of Heroku, and ([heroku with strapi](https://elements.heroku.com/buttons/strapi/strapi-heroku-template)),
- Basic understanding of [Cloudinary](https://cloudinary.com/), and
- Basic understanding of [Netlify](https://www.netlify.com/).

There are previous [tutorials](https://strapi.io/tutorials) available on how to make a blog with this or that framework. It seemed **useful for the Strapi community** to use the resulting application in order to create starters.

To get started with the starter, you have two options:

- You can start by installing the starter and then following the [tutorial](https://strapi.io/blog/build-a-blog-with-react-strapi-and-apollo) to reproduce it and learn on the way.
- Or you can run the starter to directly test the application.

Let's see how to run it!

## Deploy the backend

To deploy the Strapi instance you'll need:

- [A Heroku account](https://signup.heroku.com/)
- [A Cloudinary account for saving images](https://cloudinary.com/users/register/free)

Once you have created these accounts, you can deploy your instance by clicking on this button.
Before clicking the deploy button, make sure the `.env` file from strapi backend code has been updated with the information in the image below.
 
![update .env](https://paper-attachments.dropbox.com/s_C4E79182589BDB4904C46871F21B053849C0479A56BEC698872419E7DE5ACDC9_1649328240427_strapi005.PNG)

Then 

![Deploy](https://www.herokucdn.com/deploy/button.svg#small)

[Here is the repository of the backend of this starter](https://github.com/lucky4242/starter-blog/tree/master/my-project)[.](https://github.com/lucky4242/starter-blog/tree/master/my-project)

After deploying to Heroku, you should see the output shown below.

![strapi deployed on heroku](https://paper-attachments.dropbox.com/s_C4E79182589BDB4904C46871F21B053849C0479A56BEC698872419E7DE5ACDC9_1649327717955_strapi004.PNG)



## Deploy the frontend


**On Netlify**
To deploy the frontend, you'll need a free [Netlify account](https://app.netlify.com/signup). Once you have created your account, you can deploy your instance.

![Deploy](https://www.netlify.com/img/deploy/button.svg)


Select a repository name and fill the ``API_URL` with your Strapi instance on Heroku without the trailing slash.

**Features**

- 2 Content types: Article, Category
- 2 Created articles
- 3 Created categories
- Permissions set to `true` for article and category
- Responsive design using UIkit

**Pages**

- "/" display every articles.
- "/article/:id" display one article.
- "/category/:id" display articles depending on the category.



## Getting started

**Backend**
See full instructions on our [Strapi starter blog](https://github.com/strapi/strapi-starter-blog). Now, let’s clone our GitHub repo and start our server.

```bash
    git clone https://github.com/strapi/strapi-starter-react-blog.git
    cd strapi-starter-react-blog
```

**Start the frontend server**
```bash
    # Using yarn
    yarn install
    yarn develop
    
    # Using npm
    npm install
    npm run develop
```

React server is running here => [http://localhost:3000](http://localhost:3000/)

![blog](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/Capture-d-e-cran-2020-01-29-a--16.53.48--1-.png_3505a8e7e3.png)


If you are interested in the idea of making [React](https://strapi.io/integrations/react-cms) applications with Strapi, here are the reasons why it is very good to bet on this duo: [Strapi + React](https://strapi.io/integrations/react-cms).

If you liked it, it would be great to share the word 📣 And let me know what you thought of it in the comments below.