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.
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
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.
2. Create client connection
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.
Then, create and export a client connection instance by calling
createClient() and passing it your space id and access token:
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:
(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.
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.
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.
Because it returns a promise, you chain
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:
<Movies> will render
<Movie> for each movie in the list. Now, you can create these components.
src/ directory, create a new folder and name it
components. Then, inside components, create two new files:
Add the following code inside
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.
Movie.js, use the following code:
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
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.
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.
Explore this React CMS resource page for deeper insights into seamlessly integrating Contentful with React.