Build an API for your front end using Pages Functions

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:

Create a new React application

npx create-react-app blog-frontend
cd blog-frontend
npm start

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:

npm install react-router-dom@6

With yarn:

yarn add react-router-dom@6

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:

import { Routes, Route } from "react-router-dom";

import Posts from "./components/posts";
import Post from "./components/post";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Posts />} />
      <Route path="/posts/:id" element={<Post />} />
    </Routes>
  );
}

export default App;

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:

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const getPosts = async () => {
      const resp = await fetch("/api/posts");
      const postsResp = await resp.json();
      setPosts(postsResp);
    };

    getPosts();
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>
            <Link to={`/posts/${post.id}`}>{post.title}</Link>
          </h2>
        </div>
      ))}
    </div>
  );
};

export default Posts;

6. Populate post.js with the following code:

import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";

const Post = () => {
  const [post, setPost] = useState({});
  const { id } = useParams();

  useEffect(() => {
    const getPost = async () => {
      const resp = await fetch(`/api/post/${id}`);
      const postResp = await resp.json();
      setPost(postResp);
    };

    getPost();
  }, [id]);

  if (!Object.keys(post).length) return <div />;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.text}</p>
      <p>
        <em>Published {new Date(post.published_at).toLocaleString()}</em>
      </p>
      <p>
        <Link to="/">Go back</Link>
      </p>
    </div>
  );
};

export default Post;

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:

import posts from "./post/data";

export function onRequestGet() {
  return Response.json(posts);
}

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.

const posts = [
  {
    id: 1,
    title: "My first blog post",
    text: "Hello world! This is my first blog post on my new Cloudflare Workers + Pages blog.",
    published_at: new Date("2020-10-23"),
  },
  {
    id: 2,
    title: "Updating my blog",
    text: "It's my second blog post! I'm still writing and publishing using Cloudflare Workers + Pages :)",
    published_at: new Date("2020-10-26"),
  },
];

export default posts;

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

[[id]].js

import posts from "./data";

export function onRequestGet(context) {
  const id = context.params.id;

  if (!id) {
    return new Response("Not found", { status: 404 });
  }

  const post = posts.find((post) => post.id === Number(id));

  if (!post) {
    return new Response("Not found", { status: 404 });
  }

  return Response.json(post);
}

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

wrangler pages deploy blog-frontend

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:

git init
git remote add origin https://github.com/<YOUR-GH-USERNAME>/<REPOSITORY-NAME>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

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:

Configuration option	Value
Production branch	main
Build command	npm run build
Build directory	build

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