Develop, edit, and deploy websites entirely in the cloud with CodeSandbox, Contentful, and Netlify

The emergence of cloud computing platforms has revolutionized how data is managed, processed, and shared. The cloud computing market is expanding rapidly and replacing the traditional computing methods that rely on physical hardware.

Cloud computing entails using a remote server (or a network of them) to store, manage, or process data, making it accessible from anywhere.

Today, we’ll look at combining Contentful, CodeSandbox, and Netlify. In this tutorial, you’ll combine these tools to build and deploy a full-stack application, entirely in the browser, without having to set up a server, database, or local development environment.

Ready? Then let's show you how to build a movie collection using your Contentful space. You can find the full project code on GitHub. 

What is CodeSandbox? 

CodeSandbox provides the same complete developer experience that you would find in most advanced IDE software. The difference is that it provides all of this right inside your browser. The CodeSandbox environment includes syntax highlighting, a debugger, a source code editor, code completion, real-time compilation, and collaboration.

Additionally, to speed up development, CodeSandbox provides starter templates for over 50 projects, including popular ones like React, Vue, Angular, and Node.js, as well as static site generators like Next.js and Nuxt.js. Each project includes the relevant tools and library dependencies. 

What is Netlify?

Netlify is a hosting platform that provides everything you need to deploy your modern web apps without thinking about servers and DevOps. Netlify has a rich set of features, including free hosting, Git integration (including easier rollbacks), and deploy previews, perfect for frontend web apps and static sites. Netlify also integrates very well with the tools used in this tutorial.

Starting the project with Contentful

For simplicity, each movie will have just four properties: a title, plot, featured image, and IMDb link. You can use any assets you’d like to build this project, but here is a link to download the assets used in our demonstration, including mock movie posters made with freely available images. 

To get started, you’ll need a Contentful account. When you first sign in, a new space — named Blank — should be created for you automatically. If not, create a new space and give it a name.

Now you’re ready to create your content model and types.

1. Create a content type

In Contentful, the content model determines your content's structure and organization. Within it, you have individual content types. To get started, you need to create your first content type. 

From inside your new space, click Content Model on top of the page, then click Create a content type.

The form that appears enables you to specify the kind of content type you want to create. For this tutorial, you’ll create the Movie type. This type will have the following fields: 

• Title — Represents the title of a movie. It uses the Text type.

• Plot — Represents the movie plot. It uses the Text type.

• FeaturedImage — Represents the movie image. It uses the Media type.

• IMDb — Represents the IMDb URL of the movie. It uses the Text type. 

To add a field to your Movie type, click on the Add field button on the right and choose from the types provided in the menu: 

Once you're done with all fields, your content type should look like this:

Click Save to save your content type as is.

2. Add content 

So far, you’ve created the Movie content type and added four fields to it. Now it’s time to add some movies. 

While still within your space, click on Content to create your first Movie entry:

Here, you are adding the title, plot, featured image, and IMDb link of the first movie, Oblivion. Click Publish to save the entry after adding data to all the fields. 

This tutorial features four entries for your movie collection. However, you can add as many as you wish.

Now that you’ve finished creating your content on Contentful, you’re ready to create a React app to display these movies to users. 

Start building with CodeSandbox

So far, you’ve used Contentful to create your site content without having to set up a database locally. Now, you’ll use CodeSandbox to build an app that displays the content. 

1. Create a React project on CodeSandbox

To get started, sign up for a CodeSandbox account, which enables you to save your project anytime.

After signing in, create a new React sandbox. CodeSandbox will automatically scaffold a React app for you. Then, all you’ll have to do is modify the application by adding JSX and JavaScript.

2. Create client connection

Before you get started with defining the UI, you first need to install the Contentful JavaScript Client Library and instantiate a client connection to enable you to fetch the movies from Contentful into your app. 

To install Contentful as a project dependency in your React sandbox, search for “contentful” and add it under Dependencies:

Next, create a file inside your src folder and name it client.js. Here, you’ll use the contentful library to create an authenticated client connection.

From inside client.js, import contentful:

Copy

Then, create and export a client connection instance by calling createClient() and passing it your space id and access token:

Copy

Both space and accessToken values should be retrieved from your Contentful account. For the access tokens, use the Content Delivery API token.  

To get these tokens, navigate to the Settings > API Keys page in your Contentful account, then click Add API Key to create the new access tokens you need. 

Click Save to activate the tokens.

Please note that API keys are meant to be private. They should never be exposed in the source code. Instead, create an .env file and pass/access the keys as environmental variables.

3. Show the movies data

You’ve now created the API access tokens and used them to create and export an authenticated client connection. Next, you’ll use this client instance to fetch the movies and show them inside your components. 

First, replace the content of your App.js file with the following imports:

Copy

(Ignore all errors you receive for now; they’ll disappear by the time you’re done.)

Above, you imported the following code:

• client — The client connection, created using the access tokens.

• useState and useEffect — React hooks for managing component state and executing lifecycle tasks, respectively.

• Movies — A container component responsible for displaying the movies. You’ll make this component later on.

Next, inside your App component, initialize the movies state to an empty array and define its setter method, setMovies, for updating the state once the data is fetched.

Copy

Next, call useEffect and pass a callback function to it. In this callback, you’ll call getEntries() on your client to get all movie entries from your Contentful space. 

Copy

Because it returns a promise, you chain then() and catch() to handle success and error cases. In the case of success, you simply call setMovies and update the state with the movies data. Otherwise, you log the error to the console.

Now that you have the movies stored in App’s state, you’ll simply pass them to <Movies />, which is responsible for displaying them:

Copy

So, <Movies> will render <Movie> for each movie in the list. Now, you can create these components.

Inside your src/ directory, create a new folder and name it components. Then, inside components, create two new files: Movies.js and Movie.js.

Add the following code inside Movies.js:

Copy

Recall that in your <App> component, you passed the movies retrieved from the API call to the <Movies /> component as props. 

Then, in the component, you loop through the movie list. For each movie, you return the currently unfinished <Movie /> component, passing the current movie to it.

Now, inside Movie.js, use the following code:

Copy

Since the actual data is contained in the movie.fields object, you used the destructuring syntax to get all field values in one line of code. Then in the component, you defined the markup to show the title, plot, image, and anchor link.

To style the site, include the following style declarations in public/index.html, inside the <head> element:

Copy

At this point, all errors should disappear from the page, and you should get the following result.

Next, you’ll export the source code to GitHub to prepare your app for deployment. There’s no need to do this manually, as CodeSandbox enables you to export directly to GitHub.

To do this, click the GitHub icon on the left sidebar and authenticate your GitHub account, then create a new GitHub repo. This repo will be synced with your sandbox.

Deploy the movie app to Netlify

Now we're ready to deploy our movie app. You have several options for how to proceed here.

1. Deploy from CodeSandbox

Since you’re developing on CodeSandbox, it’ll take less time to deploy your React app to Netlify directly from here.

Click the Deployments (rocket) icon on the left sidebar, then click Deploy to Netlify. This will build your production bundle and upload it to Netlify.

You don’t need a Netlify account to deploy with CodeSandbox. Once the build process completes, click on Open Netlify Site to view the live version. 

2. Deploy with GitHub (or your preferred Git provider)

Another way to deploy your React app on Netlify is via Github.

Sign in to your Netlify account, then from your dashboard, click Import from Git. Choose your Git provider (in our example, GitHub) and connect your account. 

Next, search for the repository you want to upload and click on it. This should be the app that we exported from CodeSandbox.

You’ll be directed to the site settings page. Scroll to the bottom and click Deploy site.

Netlify will build your application for production, and after a few minutes, will notify you that the site is live. It will also provide a link to the site.

Wrapping up

Thanks to the tools used in this tutorial, building and deploying websites has never been easier. 

These tools eliminate the challenging and time-consuming parts of web development like setting up a server, database, and dev environment and managing deployments. This enables you to focus on creating a customized and attractive frontend for your content.

This is only one of the many projects you can create with Contentful. Check out our quick start tutorials, developer showcase, or sign up for a free account today to build more.

Explore this React CMS resource page for deeper insights into seamlessly integrating Contentful with React.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.