Build your Website in 10 minutes using Contentstack and React

10 minutes - huh? Do you think it’s too good to be true?

Building a website from scratch is a huge task, right? But not today - this tutorial will show you how you can make a fully functional, content-managed website faster than ever. Meet React and Contentstack - the dynamic duo that turns hours of work into minutes, without breaking a sweat (or your code).

React handles the heavy lifting for your front end, and with Contentstack, you can manage content without a single database query in sight. In this tutorial, we’ll show you how to put these two powerhouses together and build a sleek website that’s as dynamic as it is easy to manage.

You need no prior experience with Contentstack or its React Integration to follow this guide. We have broken it down into clear, actionable steps with explanations and code examples along the way.

Let’s get started! But before that -

What is Contentstack?

Contentstack is a composable Digital Experience Platform, that will allow you to build digital experiences using best-of-breed solutions. 

Our headless CMS will enable you to decouple your code from your content. No more git commits and deployments when you see a typo on your website - just make the changes on Contentstack admin and you’d be done!

This is what we mean by Contentstack being Headless and Composable. The separation of the content and how the content is going to be viewed. Generally, the content of a website becomes an afterthought for us developers. And Contentstack allows you to do just that. Your business logic stays independent of your content, and content stays framework-agnostic. Contentstack is API-First, making it extremely easy to integrate with other tools, libraries, and frameworks. Talk about flexibility and agility!

Contentstack is not just a headless CMS, though. To stand out and gain an edge in this digital era, we equip you with trailblazing products to make development easier, and to give your users one-of-a-kind experiences.

With Contentstack's composable DXP, you can  

• Manage and deliver content via Headless CMS

• Host your front end with Launch

• Leverage personalization with Personalize

• Use BaaS Automation with Automate

• Enable Visual Editing via Visual Builder

• Use Brand Aware AI with Integrated AI Solutions

Let’s Get To Building

In this guide, we will build PlateStack, a website for your high-end, fine-dining restaurant. Your final page will look like this:

Once you set that up, you can modify everything to make it your own.

Prerequisites

• Contentstack Account (with Admin access to your Org)

• Git and Node.js version 18 or later

Note: Detailed Video course on the same can be found here

Contentstack Basics

Organization and Stack

Organization acts as a parent entity that encapsulates stacks like a box of books, whereas a stack is a container that holds all the content (entries) and assets related to a website.

Learn more about Organizations and Stacks.

Content Models

Content type lets you define the structure or blueprint of a page or a section of your website. It helps you lay the foundation of your content.

Learn more about Content Models.

Setting Up Contentstack

Create a New Stack

To create a new stack, click on 'Create New':

Create Content Models

1. For ease, you can download predefined models and use the import a Content Type feature to upload the content models.
2. If you want a hands-on experience of Contentstack, you can manually create the content models with the following structure. It’ll be fun, we recommend this:

Page:

- Title (Text)

- URL (Text)

- Sections (Blocks)

Home:

- Hero Section: (Group)

- Banner (File)

- Heading (Text)

- Description (Rich Text)

- Primary CTA (Text)

Food Menu:

- Course (Group)

- Course Name (Text)

- Dishes (Reference)

About:

- About (Rich Text)

Contact:

- Contact (Rich Text)

Dishes:

- Title (Text)

- Image (File)

- Price (Number)

- Description (Rich Text)

Footer:

- Title (Text)

- Navigation Links (Group)

- Title (Text)

- Link (Link)

- Information Section:

- Logo (File)

- Description (Rich Text)

- Timings (Text)

- Holiday (Text)

- Copyright (Text)

Header:

- Title (Text)

- Logo (File)

- Navigation Links (Group)

- Link (Link)

Create Entries

1. You can either use and upload predefined entries from earlier downloaded zip with the import an Entry feature to upload the entries and assets.
2. Or Manually Create some sample entries for the Header, Footer, and Page Content Types.

Create Delivery Token

Delivery Tokens enable you to retrieve published content of a specific environment (development, stage, production).

1. First, create an environment in which you want to publish your content. For instance, development.
2. Next, generate a Delivery Token, and copy it to keep it safe.

Setting Up The React Starter App

To set up your starter app, you need to integrate the Contentstack APIs with your React application. You need to perform the following set of steps:

Fork and Clone the Starter App Repository

git clone https://github.com/contentstack/contentstack-getting-started-react-app

Install Dependencies

npm install

Configure Contentstack

• Locate the .env.sample file in the root directory and rename it to .env
• Copy and update the values from the reference stack that you created in step Create Environment and Delivery Token of your Contentstack account.

REACT_APP_CONTENTSTACK_API_KEY=stack_api_key

REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=delivery_token

REACT_APP_CONTENTSTACK_ENVIRONMENT=development

REACT_APP_CONTENTSTACK_REGION=NA

Run the application

npm start

Viola! You should see the app running locally at http://localhost:3000.

You've successfully run the React Starter Application on your local machine and connected it with Contentstack. The next step is to deploy your application using Launch.

Deploy and Host the Application Using Launch

To deploy your app using Launch, you have to create a project in Launch and link your GitHub repository to it.

1. Click on the URL displayed on the page. You will be redirected to the application deployed using Launch.

You have successfully connected your GitHub repository with Launch and deployed your application. Your application is live and it can be viewed anywhere with the generated URL.

Note: Detailed Video course can be found here

Now, you have the code, and the application deployed, so you can make changes to the functionality and deployment easily. And for content changes and management, you have Contentstack!

Contentstack Can Do More!

You can further explore adding features to your React application.

1. Do you want to see how your content will be rendered on the website, in real-time? You can add live preview to your application.

2. Want to show the right content, to the right people, at the right time? Consider adding personalization to your application.

3. You can also automate the business logic for your application.

4. For Content Generation in AI, Use AI to generate brand-aware content.

5. Try Visual Editing in Contentstack for.

6. To Extend and customize Contentstack and Build apps for Contentstack Marketplace