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 tutorial, you will learn how to build a productivity tips app using Render, Remix and Strapi.
The productivity app will have the following:
/tips
page to view all the productivity tips in the database, andThis productivity tips web app is an app that displays a list of tips to improve productivity. This app works by passing tips and information about them from the app’s database to the frontend.
You can get the final project in the Strapi repo and the Remix repo.
To follow this article, you will need knowledge of the following:
You also need the following installed:
Remix is a web framework that allows you to concentrate on the user interface, while taking care of the speed and responsiveness of your application. Remix uses nested routing, which promotes effective interaction between a frontend and one or more backends.
The productivity tips application consists of both a frontend using Remix and a backend using Strapi. Effective communication between ends of the application leads to a better and faster user experience.
Strapi is an open-source headless CMS that allows you to build GraphQL and RESTful APIs. A headless CMS allows developers to easily create APIs that can be integrated with any frontend.
A CMS (Content Management System) is a software that allows users to create and maintain contents for a web application. A headless CMS is just like a regular CMS, but it does not have a frontend that people interact with.
Render is a cloud service that allows you to deploy and run your websites, apps, and much more. With render you can set up and deploy your entire project with a single configuration file. This configuration file acts as a blueprint for setting up your project.
To get your Remix website and the Strapi app running, you need to deploy them on a cloud. After deploying the applications, you can access them using the domain name provided by the cloud provider, or you can add a custom domain name.
Before you start, make sure you have a GitHub Account, then follow the steps below:
yarn install
to install the dependencies.cp .env.example .env
to copy the environment variables from .env.example
to .env
.yarn develop
to start the strapi application in development mode.After setting up and starting the Strapi application, you need to do a few things:
The Strapi application in the repo already has the productivity tip's Content Type setup. You can see it by navigating to Content Type Builder -> Tip.
You can also add more tips to your application before continuing if you want.
Now, you are done with setting up the Strapi app. You can begin to create the frontend.
To create the remix app, follow the below steps:
cd
into the local repositorynpm install
to install its dependencies.This repository is split into five (5) branches, each showing the steps taken to build the application.
The link to this step is available here. In this branch, the remix application was created and initialized. When you run npm run dev
in this branch, the web application looks like the below:
The link to this step is available here.
To switch to this branch, use git checkout step-2
. The changes made in this step were to the app/root.tsx
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
import {
Link,
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "remix";
export function links () {
return [{
rel: "stylesheet",
href: "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
}]
}
export function meta() {
return { title: "Productivity Tips" };
}
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<nav style={{marginLeft: 10}}>
<h1>
<Link to="/" style={{color: "var(--h1-color)"}}>
Productivity Tips
</Link>
</h1>
</nav>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
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
import {
Link,
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "remix";
export function links () {
return [{
rel: "stylesheet",
href: "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
}]
}
export function meta() {
return { title: "Productivity Tips" };
}
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<nav style={{marginLeft: 10}}>
<h1>
<Link to="/" style={{color: "var(--h1-color)"}}>
Productivity Tips
</Link>
</h1>
</nav>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
/
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
import {
Link,
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "remix";
export function links () {
return [{
rel: "stylesheet",
href: "https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
}]
}
export function meta() {
return { title: "Productivity Tips" };
}
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<nav style={{marginLeft: 10}}>
<h1>
<Link to="/" style={{color: "var(--h1-color)"}}>
Productivity Tips
</Link>
</h1>
</nav>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
When you run this program, the web app will look the below:
The link to this step can be found here.
To switch to this branch use the git checkout step-3
command.
The file changed in this step is src/index.tsx
, and the following were the changes made:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Link } from "remix";
export default function Index() {
return (
<main className="container">
<p>
Over time everyone develops a Swiss army knife of tips, tricks,
and hacks to boost productivity. At Render, I created a
#productivity-tips Slack channel for anyone to share their best
productivity boosters with everyone on the team. Using
<a href="https://strapi.io">Strapi</a> and
<a href="https://remix.run">Remix</a>, we made a little web app to
catalog all of these tips and share them with others. 🤓
</p>
<Link to="/tips">👉 Productivity Tips</Link>
</main>
);
}
/tips
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Link } from "remix";
export default function Index() {
return (
<main className="container">
<p>
Over time everyone develops a Swiss army knife of tips, tricks,
and hacks to boost productivity. At Render, I created a
#productivity-tips Slack channel for anyone to share their best
productivity boosters with everyone on the team. Using
<a href="https://strapi.io">Strapi</a> and
<a href="https://remix.run">Remix</a>, we made a little web app to
catalog all of these tips and share them with others. 🤓
</p>
<Link to="/tips">👉 Productivity Tips</Link>
</main>
);
}
/tips
is a page that will be created in the next step. This page holds a list of all the tips stored in the Strapi backend.
When you run the program at this step, the web application looks like the below:
The link to this step can be found here
The following are new files created in this step:
app/routes/tips.jsx
file, which is the template that shows both the content of the list of tips and individual tips details.1
2
3
4
5
6
7
8
9
import { Outlet } from "remix";
export default function TipsRoute() {
return (
<main className="container">
<Outlet />
</main>
);
}
index.jsx
file inside a new app/routes/tips
folder. This component will be rendered in place of the <Outlet />
above.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
import { Link, useLoaderData } from "remix";
import { checkStatus, checkEnvVars } from "~/utils/errorHandling";
export async function loader () {
checkEnvVars();
const res = await fetch(`${process.env.STRAPI_URL_BASE}/api/tips?populate=*`, {
method: "GET",
headers: {
"Authorization": `Bearer ${process.env.STRAPI_API_TOKEN}`,
"Content-Type": "application/json"
}
});
// Handle HTTP response code < 200 or >= 300
checkStatus(res);
const data = await res.json();
// Did Strapi return an error object in its response?
if (data.error) {
console.log('Error', data.error)
throw new Response("Error getting data from Strapi", { status: 500 })
}
return data.data;
}
export default function Tips() {
const tips = useLoaderData();
return (
<ul>
{tips.map((tip) => (
<li key={tip.attributes.Slug}>
<Link to={tip.attributes.Slug}>{tip.attributes.Name}</Link>
</li>
))}
</ul>
);
}
errorHandling.js
inside a new app/utils
folder. The errorHandling.js
folder provides the checkEnvVars()
and checkStatus
folder that the app.routes/tips/index.jsx
folder.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
// Custom error class for errors from Strapi API
class APIResponseError extends Error {
constructor(response) {
super(`API Error Response: ${response.status} ${response.statusText}`);
}
}
export const checkStatus = (response) => {
if (response.ok) {
// response.status >= 200 && response.status < 300
return response;
} else {
throw new APIResponseError(response);
}
}
class MissingEnvironmentVariable extends Error {
constructor(name) {
super(`Missing Environment Variable: The ${name} environment variable must be defined`);
}
}
export const checkEnvVars = () => {
const envVars = [
'STRAPI_URL_BASE',
'STRAPI_API_TOKEN'
];
for (const envVar of envVars) {
if (! process.env[envVar]) {
throw new MissingEnvironmentVariable(envVar)
}
}
}
In the index.jsx
file, the useLoaderData()
function calls the loader
function on lines 4-27. the loader
function is helpful for separating the program that interacts with APIs, from the view.
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
import { Link, useLoaderData } from "remix";
import { checkStatus, checkEnvVars } from "~/utils/errorHandling";
export async function loader () {
checkEnvVars();
const res = await fetch(`${process.env.STRAPI_URL_BASE}/api/tips?populate=*`, {
method: "GET",
headers: {
"Authorization": `Bearer ${process.env.STRAPI_API_TOKEN}`,
"Content-Type": "application/json"
}
});
// Handle HTTP response code < 200 or >= 300
checkStatus(res);
const data = await res.json();
// Did Strapi return an error object in its response?
if (data.error) {
console.log('Error', data.error)
throw new Response("Error getting data from Strapi", { status: 500 })
}
return data.data;
}
export default function Tips() {
const tips = useLoaderData();
return (
<ul>
{tips.map((tip) => (
<li key={tip.attributes.Slug}>
<Link to={tip.attributes.Slug}>{tip.attributes.Name}</Link>
</li>
))}
</ul>
);
}
Before running the application, you need to complete the following steps:
.env.example
file to .env
.1
2
STRAPI_URL_BASE=http://localhost:1337
STRAPI_API_TOKEN=a-secret-token-from-the-strapi-admin-gui
a-secret-token-from-the-strapi-admin-gui
with the API token, then click Save.If you are using windows, you might need to change the
STRAPI_URL_BASE
's value tohttp://127.0.0.1:1337
.
After running your application with the npm run dev
command, the web application should look like the below:
In this step, the following files are created:
app/routes/tips/$tipId.jsx
. Remix uses files that begin with a dollar sign to define dynamic URL routes.app/styles/tip.css
. This file holds contains the styling for the grid of screenshot imagesIn the $tipId.jsx
file, the following is what happens:
tip.css
file into the $tipId.jsx
file.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useLoaderData, Link } from "remix";
import { checkStatus, checkEnvVars } from "~/utils/errorHandling";
import stylesUrl from "~/styles/tip.css";
export function links () {
return [{ rel: "stylesheet", href: stylesUrl }];
}
export function meta ({ data }) {
return {
title: data.attributes.Name
}
}
export async function loader ({ params }) {
...
TipRoute
component that is exported by default.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
...
export default function TipRoute() {
const tip = useLoaderData();
return (
<div>
<Link to="/tips" style={{ textDecoration: 'none' }}>← back to list</Link>
<hgroup>
<h2>{tip.attributes.Name}</h2>
<h3>by {tip.attributes.Author.data?.attributes.firstname ?? 'an unknown user'}</h3>
</hgroup>
<p>
{tip.attributes.Description}
</p>
<div className="grid">
{tip.attributes.Screenshots.data.map((s) => (
<div key={s.attributes.hash}>
<img
src={s.attributes.formats.thumbnail.url}
alt={tip.attributes.Name + ' screenshot'}
/>
</div>
))}
</div>
</div>
);
}
loader
function for useLoaderData()
hook in the TipRoute component.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
import { useLoaderData, Link } from "remix";
import { checkStatus, checkEnvVars } from "~/utils/errorHandling";
import stylesUrl from "~/styles/tip.css";
export function links () {
return [{ rel: "stylesheet", href: stylesUrl }];
}
export function meta ({ data }) {
return {
title: data.attributes.Name
}
}
export async function loader ({ params }) {
checkEnvVars();
const res = await fetch(`${process.env.STRAPI_URL_BASE}/api/tips`
+ `?populate=*&filters[Slug]=${params.tipId}`, {
method: "GET",
headers: {
"Authorization": `Bearer ${process.env.STRAPI_API_TOKEN}`,
"Content-Type": "application/json"
}
})
// Handle HTTP response code < 200 or >= 300
checkStatus(res);
const data = await res.json();
// Did Strapi return an error object in its response?
if (data.error) {
console.log('Error', data.error)
throw new Response("Error getting data from Strapi", { status: 500 })
}
// Did Strapi return an empty list?
if (!data.data || data.data.length === 0) {
throw new Response("Not Found", { status: 404 });
}
const tip = data.data[0];
// For a Tip with no screenshot, replace API returned null with an empty array
tip.attributes.Screenshots.data = tip.attributes.Screenshots.data ?? [];
// Handle image URL being returned as just a path with no scheme and host.
// When storing media on the filesystem (Strapi's default), media URLs are
// return as only a URL path. When storing media using Cloudinary, as we do
// in production, media URLs are returned as full URLs.
for (const screenshot of tip.attributes.Screenshots.data) {
if (!screenshot.attributes.formats.thumbnail.url.startsWith('http')) {
screenshot.attributes.formats.thumbnail.url = process.env.STRAPI_URL_BASE +
screenshot.attributes.formats.thumbnail.url;
}
}
return tip;
}
...
In the loader
function, the following happens:
checkEnvVars()
function to check if all the environment variables needed are present.http://localhost:1337/api/tips
route (The URL contains parameters that Strapi uses to specify the request).checkStatus()
function to check that the http status is alright ( between 200 to 299 ).When you run the application at this point, the http://localhost:3000/tips/tip page should look like the below:
Before deploying your project to the cloud, you need to follow the below steps:
strapiconf2022-workshop-strapi
repo.repo
s in the /render.yaml
file to URL of your remote strapi and remix repo ( In your case it might be https://github.com/your-username/strapiconf2022-workshop-strapi
and https://github.com/your-username/strapiconf2022-workshop-remix
).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
services:
- type: web
name: productivity-tips-api
env: node
plan: free
# Update the following line with your Strapi GitHub repo
repo: https://github.com/render-examples/strapiconf2022-workshop-strapi
branch: main
buildCommand: yarn install && yarn build
startCommand: yarn start
healthCheckPath: /_health
envVars:
- key: NODE_VERSION
value: ~16.13.0
- key: NODE_ENV
value: production
- key: CLOUDINARY_NAME
sync: false
- key: CLOUDINARY_KEY
sync: false
- key: CLOUDINARY_SECRET
sync: false
- key: DATABASE_URL
fromDatabase:
name: strapi
property: connectionString
- key: JWT_SECRET
generateValue: true
- key: ADMIN_JWT_SECRET
generateValue: true
- key: API_TOKEN_SALT
generateValue: true
- key: APP_KEYS
generateValue: true
- type: web
name: productivity-tips-web
env: node
plan: free
# Update the following line with your Remix GitHub repo
repo: https://github.com/render-examples/strapiconf2022-workshop-remix
branch: step-5
buildCommand: npm install && npm run build
startCommand: npm start
envVars:
- key: STRAPI_URL_BASE
fromService:
type: web
name: productivity-tips-api
envVarKey: RENDER_EXTERNAL_URL
databases:
- name: strapi
plan: free # This database will expire 90 days after creation
1
2
3
$ git add render.yaml
$ git commit
$ git add
render.yaml
file. In this case, the strapiconf2022-workshop-strapi
repo.When you select the repo, you will be prompted to add the following details:
Service Group Name
. This is a unique name that is used to identify your project within your account.CLOUDINARY_NAME
CLOUDINARY_KEY
CLOUDINARY_SECRET
To get the value for the last three fields above, you need to do the following:
1. Login to the Cloudinary dashboard.
2. Click Start configuring.
3. Copy the values of the following fields:
- cloud_name
- api_key
- api_secret
CLOUDINARY_NAME
CLOUDINARY_KEY
CLOUDINARY_SECRET
After filling the fields, click Apply Then you wait for Render to deploy your application.
Once your application has been deployed, you can see the address of your deployed application by navigating to the dashboard, then select:
productivity-tips-web
for the Remix appproductivity-tips-api
for the Strapi appAfter selecting any of the above, you will see the domain name that anyone can use to access your web application.
To get the application up and running, you need to do the following:
/admin
).productivity-tips-web
serviceSTRAPI_API_TOKEN
and paste the generated API tokenAfter setting up your application, you can now add productivity tips to your application from the Strapi backend, and you can now fully use the web application.
To further your knowledge, be sure to check out the following links:
Chigozie is a technical writer. He started coding since he was young, and entered technical writing recently.