Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app
my-project
In this guide, we will use Strapi and ReactJS to build a To-Do List application. This application is simple enough to give a basic understanding of how we create backend APIs using Strapi. We start our project by building the backend first, then we build the frontend, and we finally merge them as a single project.
This guide does not cover every single detail of the Strapi or the React framework. This article doesn’t cover the following:
You need to have knowledge of the following to fully understand this guide:
You don’t need an advanced knowledge of Strapi to follow this guide. You must have a NodeJS version greater than 12 installed, along with either yarn or npm package manager.
Strapi is an open-source headless CMS (short for Content Management Systems) that allows you to quickly create and maintain RESTful JavaScript APIs. Strapi helps in creating both simple and complex backends, either as an individual or an organization. Strapi is built on NodeJS, which provides high performance in processing large amounts of requests simultaneously.
We start our project by creating a Strapi application. This application provides an admin page that allows us to handle the operations within our backend. We create a Strapi app using any of the following commands depending on your package manager:
npx create-strapi-app todo-list --quickstart
yarn install global create-strapi-app
yarn create-strapi-app todo-list --quickstart
yarn dlx create-strapi-app todo-list --quickstart
If the command creates our Strapi app successfully, we run our application in development mode. We use the development mode to create data collections and API endpoint to those collections. The development mode creates a local server, which allows us to to the following:
To run our application development mode, we navigate to the todo-list folder, and run any of the following commands:
npm run develop
yarn run develop
If we open the http://localhost:1337/admin site, our application should look like the below.
This page allows us to create an admin account. Having an admin account signifies that you own the application. Only the owner of the application has exclusive access to the backend operations, which ensures the security of your application.
When we create an admin account, the application takes us to the dashboard. This dashboard displays all the possible operations that we can perform on the left panel.
In this section, we'll build the backend for our to-do list. The backend gives us a basic idea of how data will flow between the ends of our application. We build it using the following steps:
A collection is a group of data that have similar skeletal structure. Strapi creates separate API endpoints for each collection. We go through the following steps to create our "Todo" collection:
After the collection is created, we add test entries. We create test entries to see if the collection handles data as expected. We add entries to our collection through the following steps:
Navigate to “Content Manager”. We use this page to manipulate the entries of our collection.
Click on “Create new entry” in the “Todo” collection type.
Write any text into the “item” box.
We create API endpoints for our frontend using the Todo collection. These endpoints allows a frontend to interact with our collection. We go through the following steps to create the endpoints:
After performing the steps above, the following endpoints will be created for each of the permission created:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
"data": [
{
"id": 1,
"attributes": {
"item": "item",
"createdAt": "2022-04-19T10:33:44.577Z",
"updatedAt": "2022-04-19T10:33:45.723Z",
"publishedAt": "2022-04-19T10:33:45.718Z"
}
},
{
"id": 2,
"attributes": {
"item": "item 2",
"createdAt": "2022-04-19T10:33:56.381Z",
"updatedAt": "2022-04-19T10:33:58.147Z",
"publishedAt": "2022-04-19T10:33:58.144Z"
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 2
}
}
}
1
2
3
4
5
{
"data": {
"item": "item 3"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
{
"data": {
"id": 3,
"attributes": {
"item": "item 3",
"createdAt": "2022-04-19T13:17:36.082Z",
"updatedAt": "2022-04-19T13:17:36.082Z",
"publishedAt": "2022-04-19T13:17:36.079Z"
}
},
"meta": {}
}
1
2
3
4
5
6
7
8
9
10
11
12
{
"data": {
"id": 2,
"attributes": {
"item": "item 2",
"createdAt": "2022-04-19T13:15:10.869Z",
"updatedAt": "2022-04-19T13:15:11.839Z",
"publishedAt": "2022-04-19T13:15:11.836Z"
}
},
"meta": {}
}
1
2
3
4
5
{
"data": {
"item": "2nd item"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
{
"data": {
"id": 2,
"attributes": {
"item": "2nd item",
"createdAt": "2022-04-19T13:17:36.082Z",
"updatedAt": "2022-04-19T13:51:06.266Z",
"publishedAt": "2022-04-19T13:14:59.823Z"
}
},
"meta": {}
}
1
2
3
4
5
6
7
8
9
10
11
12
{
"data": {
"id": 2,
"attributes": {
"item": "item 2",
"createdAt": "2022-04-19T13:17:36.082Z",
"updatedAt": "2022-04-19T13:15:11.839Z",
"publishedAt": "2022-04-19T13:15:11.836Z"
}
},
"meta": {}
}
ReactJS is a JavaScript framework for building web applications. This framework is popular and beginner-friendly, which is why we will be using it in this guide. We create a React application with any of the following commands:
yarn install global create-react-app
yarn create-react-app todo-frontend
yarn dlx create-react-app todo-frontend
npx create-react-app todo-frontend
After we create the react app, we create two files for the environment variables, and write the following into it:
1
REACT_APP_BACKEND=http://localhost:1337/
1
REACT_APP_BACKEND=/
.env.development contains the environment variables for development, and .env.production contains the environment variables for development.
Now that we have our React project setup, we copy the following into the App.js file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { useState, useEffect } from 'react';
import TodoItem from './TodoItem';
import './App.css';
function App() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
useEffect(() => {
// update update the list of todos
// when the component is rendered for the first time
update();
}, []);
// This function updates the component with the
// current todo data stored in the server
function update() {
fetch(`${process.env.REACT_APP_BACKEND}api/todos`)
.then(res => res.json())
.then(todo => {
setTodos(todo.data);
})
}
// This function sends a new todo to the server
// and then call the update method to update the
// component
function addTodo(e) {
e.preventDefault();
let item = newTodo;
let body = {
data: {
item
}
};
fetch(`${process.env.REACT_APP_BACKEND}api/todos`, {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(body)
})
.then(() => {
setNewTodo("");
update();
})
}
return (
<div className="app">
<main>
{/* we centered the "main" tag in our style sheet*/}
{/* This form collects the item we want to add to our todo, and sends it to the server */}
<form className="form" onSubmit={addTodo}>
<input type="text" className="todo_input" placeholder="Enter new todo" value={newTodo} onChange={e => setNewTodo(e.currentTarget.value) }/>
<button type="submit" className="todo_button">Add todo</button>
</form>
{/* This is a list view of all the todos in the "todo" state variable */}
<div>
{
todos.map((todo, i) => {
return <TodoItem todo={todo} key={i} update={update} />
})
}
</div>
</main>
</div>
)
}
export default App;
After copying the above into our App.js file, we create the TodoItem.jsx component file in the same directory. This component renders each item of our to-do list. We copy the following into our TodoItem.jsx file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import { useState } from "react";
import './App.css';
function TodoItem({ todo, update }) {
// Our component uses the "edit" state
// variable to switch between editing
// and viewing the todo item
const [edit, setEdit] = useState(false);
const [newTodo, setNewTodo] = useState("");
// This function changes the to-do that
// is rendered in this component.
// This function is called when the
// form to change a todo is submitted
function changeTodo(e) {
e.preventDefault();
let item = newTodo;
let pos = todo.id;
let body = {
data: {
item
}
};
fetch(`${process.env.REACT_APP_BACKEND}api/todos/${pos}`, {
method: "PUT",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(body)
})
.then(() => {
setEdit(false);
update();
})
}
// This function deletes the to-do that
// is rendered in this component.
// This function is called when the
// form to delete a todo is submitted
function deleteTodo(e) {
e.preventDefault();
let pos = todo.id;
fetch(`${process.env.REACT_APP_BACKEND}api/todos/${pos}`, {
method: "DELETE"
})
.then(() => {
update();
})
}
return <div className="todo">
{/*
The below toggles between two components
depending on the current value of the "edit"
state variable
*/}
{ !edit
? <div className="name">{todo.attributes.item}</div>
: <form onSubmit={changeTodo}>
<input className="todo_input" type="text" placeholder="Enter new todo" value={newTodo} onChange={e => setNewTodo(e.currentTarget.value)} />
<button className="todo_button" type="submit">Change todo</button>
</form>
}
<div>
<button className="delete" onClick={deleteTodo}>delete</button>
<button className="edit" onClick={() => {
// this button toggles the "edit" state variable
setEdit(!edit)
// we add this snippet below to make sure that our "input"
// for editing is the same as the one for the component when
// it is toggled. This allows anyone using it to see the current
// value in the element, so they don't have to write it again
setNewTodo(todo.attributes.item)
}}>edit</button>
</div>
</div>
}
export default TodoItem;
After creating this component, we add CSS styling to our web page by copying the following into our App.css file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.app {
display: flex;
justify-content: center;
text-align: center;
}
.todo_input {
height: 16px;
padding: 10px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border: 2px solid blueviolet;
}
.todo_button {
border: 2px solid blueviolet;
background-color: transparent;
height: 40px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.todo {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-weight: 700;
margin-bottom: 5px;
min-width: 340px;
}
.edit {
width: 66px;
font-weight: 700;
background: blueviolet;
border: none;
border-top-right-radius: 5px;
height: 33px;
border-bottom-right-radius: 5px;
color: white;
font-size: medium;
}
.delete {
width: 66px;
font-weight: 700;
background: white;
border: 2px solid blueviolet;
border-top-left-radius: 5px;
height: 33px;
color: blueviolet;
border-bottom-left-radius: 5px;
font-size: medium;
}
.form {
padding-top: 27px;
padding-bottom: 27px;
}
.name {
max-width: 190.34px;
text-align: left;
}
When we run this application, our website will look like the image below.
We can merge our React frontend and our Strapi backend into one full-stack project. Merging the two ends allows us to deploy our project on a single server. We follow the below steps to merge them together.
The build command is either of the following:
yarn run build
npm run build
If we do the following, our application should come out right:
In this article, we covered the following:
The to-do list application is a very simple application, which involves manipulating entries and RESTful APIs with the collections. You can find the project for this article in the GitHub repo.
Chigozie is a technical writer. He started coding since he was young, and entered technical writing recently.