Build an API for your front end using Pages Functions

​​ Introduction

In this tutorial, you will build a full-stack Pages application. Your application will contain:

• A front end, built using Cloudflare Pages and the React framework.
• A JSON API, built with Pages Functions, that returns blog posts that can be retrieved and rendered in your front end.

If you prefer to work with a headless CMS rather than an API to render your blog content, refer to the headless CMS tutorial.

​​ Build your front end

To begin, create a new Pages application using the React framework.

​​ Create a new React project

In your terminal, create a new React project called blog-frontend using the create-react-app command. Go into the newly created blog-frontend directory and start a local development server:

​​ Set up your React project

To set up your React project:

1. Install the React Router in the root of your blog-frontend directory.

With npm:

With yarn:

2. Clear the contents of src/App.js. Copy and paste the following code to import the React Router into App.js, and set up a new router with two routes:

3. In the src directory, create a new folder called components.
4. In the components directory, create two files: posts.js, and post.js. These files will load the blog posts from your API, and render them.
5. Populate posts.js with the following code:

6. Populate post.js with the following code:

​​ Build your API

You will now create a Pages Functions that stores your blog content and retrieves it via a JSON API.

​​ Write your Pages Function

To create the Pages Function that will act as your JSON API:

1. Create a functions directory in your blog-frontend directory.
2. In functions, create a directory named api.
3. In api, create a posts.js file in the api directory.
4. Populate posts.js with the following code:

This code gets blog data (from data.js, which you will make in step 8) and returns it as a JSON response from the path /api/posts.

5. In the api directory, create a directory named post.
6. In the post directory, create a data.js file.
7. Populate data.js with the following code. This is where your blog content, blog title, and other information about your blog lives.

8. In the post directory, create an [[id]].js file.
9. Populate [[id]].js with the following code:

[[id]].js is a dynamic route which is used to accept a blog post id.

​​ Deploy

After you have configured your Pages application and Pages Function, deploy your project using the Wrangler or via the dashboard.

​​ Deploy with Wrangler

In your blog-frontend directory, run wrangler pages deploy to deploy your project to the Cloudflare dashboard.

​​ Deploy via the dashboard

To deploy via the Cloudflare dashboard, you will need to create a new Git repository for your Pages project and connect your Git repository to Cloudflare. This tutorial uses GitHub as its Git provider.

​​ Create a new repository

Create a new GitHub repository by visiting repo.new . After creating a new repository, prepare and push your local application to GitHub by running the following commands in your terminal:

​​ Deploy with Cloudflare Pages

Deploy your application to Pages:

1. Log in to the Cloudflare dashboard and select your account.
2. In Account Home, select Workers & Pages > Create application > Pages > Connect to Git.
3. Select the new GitHub repository that you created and, in the Set up builds and deployments section, provide the following information:

After configuring your site, begin your first deploy. You should see Cloudflare Pages installing blog-frontend, your project dependencies, and building your site.

By completing this tutorial, you have created a full-stack Pages application.

​​ Related resources

• Learn about Pages Functions routing