Strapi Starter React Blog

May 2, 2022

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 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.

Key Features of Strapi Starter React Blog

• Customizable Templates: Forget about rigid, one-size-fits-all templates. With Strapi, you get flexible blog templates that you can tweak to match your brand’s unique style. Want to add a custom header or a specific layout for your posts? No problem. The templates are designed to be as flexible as you need them to be.

• API Management: Strapi shines when it comes to API management. It allows you to efficiently manage your content through a robust API, supporting methods like GET, POST, DELETE, and PUT. This means you can build dynamic, data-driven applications without breaking a sweat.

• Content Types Builder: Organizing your content has never been easier. Strapi’s Content Types Builder lets you create structured content types tailored to your needs. Whether you’re categorizing posts, managing tags, or setting up author profiles, you have the control to structure your content just right.

• Media Library: Handling media files is a breeze with Strapi’s advanced media management capabilities. Upload, organize, and serve media assets efficiently, ensuring your blog looks stunning without sacrificing performance.

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,
• Downloaded and installed latest Node.js v14,
• Basic understanding of Heroku, and (heroku with strapi),
• Basic understanding of Cloudinary, and
• Basic understanding of Netlify.

There are previous 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 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
• A Cloudinary account for saving images

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.

Then

Here is the repository of the backend of this starter.

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

Deploy the frontend

On Netlify To deploy the frontend, you'll need a free Netlify account. Once you have created your account, you can deploy your instance.

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. Now, let’s clone our GitHub repo and start our server.

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

Start the frontend server

 # Using yarn
 yarn install
 yarn develop

 # Using npm
 npm install
 npm run develop

React server is running here => http://localhost:3000

Tips for Optimizing Your Strapi Starter React Blog

• Enhance Performance: Speed matters. Ensure your blog loads quickly by optimizing images and using lazy loading techniques. Leverage Strapi’s efficient API to minimize data fetching times, keeping your blog snappy and responsive.

• Improve SEO: You want people to find your blog, right? Implement best SEO practices by using descriptive meta tags, optimizing URLs, and ensuring mobile-friendliness. Tools like Strapi's SEO plugin can help you boost your search visibility effortlessly.

• Customize UI: Make your blog uniquely yours. Tailor the design to reflect your brand’s personality. Use React’s component-based architecture to create reusable UI elements, ensuring a consistent look and feel across your site.

If you are interested in the idea of making React applications with Strapi, here are the reasons why it is very good to bet on this duo: Strapi + React.

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.

Maxime started to code in 2015 and quickly joined the Growth team of Strapi. He particularly likes to create useful content for the awesome Strapi community. Send him a meme on Twitter to make his day: @MaxCastres