Render, Remix, and Strapi: Let's Build a Productivity Tips App
Tags: javascript, tutorial
Published: 2022-04-04 19:55:43

---
title: Render, Remix, and Strapi: Let's Build a Productivity Tips App
published: true
description: Deploy a Strapi+Remix app on Render with this recap from my workshop at StrapiConf 2022.
tags: javascript, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7du1oghok3m3hsfwcapl.png
---

## What are Strapi and Remix?

[Strapi](https://strapi.io/) is "the leading open-source headless CMS. It's 100% JavaScript, fully customizable, and developer-first." Think of it as an admin GUI to manage your content. That content could be blog posts or product images or videos. And Strapi automatically generates both REST and GraphQL APIs for the content. Render has been an especially popular place to deploy Strapi because it provides one of the quickest paths to get Strapi running in a production environment.

[Remix](https://remix.run) is "a full stack web framework that lets you focus on the user interface...to deliver a fast, slick, and resilient user experience." It comes from some well-known developers from the React ecosystem and has been getting more and more attention since its open source debut at the end of 2021.

## Why Strapi and Remix Together?

Strapi and Remix are both popular and growing open source JavaScript projects. In fact, they topped the list of [Node.js Framework Rising Stars in 2021](https://risingstars.js.org/2021/en#section-nodejs-framework).

![A screenshot showing Strapi and Remix (among others) as 2021 Node.js Rising Stars.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ze99c2hkobstuch1wtyf.png)

But more importantly, these two tools complement each other well. Strapi serves as an ideal back end for a Remix front-end. Strapi gives us many things we, as developers, would otherwise have to build ourselves: a clean abstraction on top of a database, a data admin GUI, and an API for the front-end to use. Remix builds upon the vast React ecosystem, letting you quickly create a front-end and scale it up as needed. It addresses a lot of the time-consuming complexity that has become a regular part of a React developer’s work.

## A Productivity Tips App

The inspiration for this app came from Render Engineer [Shantanu Joshi](https://twitter.com/joshishantanu4): "Over time, everyone develops a Swiss army knife of tips, tricks, and hacks to boost productivity. At Render, we created a #productivity-tips Slack channel for anyone to share their best productivity boosters with everyone on the team."

But Slack doesn't provide a great way to discover tips that others have shared in the channel. You can scroll back through the conversation history, but wouldn't it be nice if there was a web page with a simple list? Using Strapi and Remix, we're going to make a web app to catalog all of these tips and share them with others.

Here's a visual overview of what we'll build.

![A diagram showing the high-level architecture of our Productivity Tips app.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1p82lce3d2gm48wjgpr.png)

And here are the steps we’ll take to get there:

1. [Set up your development machine](#set-up-your-development-machine)
2. [Configure and get familiar with Strapi](#configure-and-get-familiar-with-strapi)
3. [Build the front-end with Remix](#build-the-frontend-with-remix)
4. [Deploy everything to Render](#deploy-everything-to-render)

### Set Up Your Development Machine

You’ll need [Node.js](https://nodejs.org/en/download/), [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/), [git](https://git-scm.com/downloads), a [Render account](https://render.com/register), and a [Cloudinary account](https://cloudinary.com/users/register/free). If you don't have them already, install the tools and create the accounts linked above (everything's free).

### Configure and Get Familiar with Strapi

We'll start with an [example repository](https://github.com/render-examples/strapiconf2022-workshop-strapi) that contains only a few changes from the [default Strapi project scaffolding](https://docs.strapi.io/developer-docs/latest/getting-started/quick-start.html). Following the instructions in the [Set up Strapi section](https://github.com/render-examples/strapiconf2022-workshop-strapi#set-up-strapi) of the example repository's README, run Strapi locally to get comfortable with Strapi and understand the minor code changes below.

Here are the changes I made to the Strapi scaffolding. The links will take you to the code for each change.

1. Use [PostgreSQL in production](https://github.com/render-examples/strapiconf2022-workshop-strapi/blob/main/config/env/production/database.js) and [SQLite for local development](https://github.com/render-examples/strapiconf2022-workshop-strapi/blob/main/config/database.js).
2. Use [Cloudinary for media storage, resizing, and serving in production](https://github.com/render-examples/strapiconf2022-workshop-strapi/blob/main/config/env/production/plugins.js), and use the filesystem during local development. No code changes were necessary to use the local filesystem because that is the default built into Strapi.
3. [Tell Strapi what its public URL is](https://github.com/render-examples/strapiconf2022-workshop-strapi/blob/main/config/env/production/server.js) when deployed in production.
4. Create the [Tip content type](https://github.com/render-examples/strapiconf2022-workshop-strapi/tree/main/src/api).

![A screenshot of the Strapi Admin GUI Content Type builder.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq7z5k1ukxezbzw06g8d.png)

**Note**: *Strapi requires you to define Content Types–effectively, the data schema–in code. When you deploy your Strapi service to production, those Content Types are deployed along with the Strapi application code. However, content for each Content Type only lives within the environment in which it's created. You can read more about this in the [Strapi documentation](https://docs.strapi.io/user-docs/latest/content-types-builder/creating-new-content-type.html).*

*In our example, we've created a `Tip` Content Type in development, and we will deploy that to production. However, any content we create in development won't be deployed to production, and any content we create in production won't be available in development.*

Once you've completed the instructions to set up Strapi, including adding some sample Tip content in the Strapi Admin GUI, we'll move on to building the Remix service.

### Build the Front-End with Remix

Strapi is mostly plug-and-play, requiring you to write code only when you want to customize its default functionality. On the other hand, building a Remix app requires us to write more code. We can start with a Remix scaffolding, but we still need to create the web page views and API requests to to show our productivity tip data. I've broken the process into five steps to guide you through this code. Each step is a separate git branch in the example repository, and the README for each branch explains the changes in that branch.

![A screenshot of the branches labeled step one through five in the example Remix repository.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4564n5pe48letk8jkj4l.png)

You can either start with the `step-1` branch and work your way through the changes in each branch or skip to `step-5`, which contains the final example code that we'll deploy to Render. To start at `step-1` and work through the branches, follow the [README instructions in each branch](https://github.com/render-examples/strapiconf2022-workshop-remix#readme).

To skip to `step-5`, fork the [example repository](https://github.com/render-examples/strapiconf2022-workshop-remix), `git clone` it, switch to the `step-5` branch with `git checkout step-5`, and then install the necessary dependencies with `npm install`. Now we can connect the Remix app to Strapi's REST API. To do that,

1. Copy the `.env.example` file to `.env`. This file provides our Remix app with two variables it needs to access the Strapi API: `STRAPI_URL_BASE` and `STRAPI_API_TOKEN`.
2. We need to ask Strapi to generate an API token for use in development. In the Strapi Admin GUI, go to Settings --> API Tokens --> Create new API Token. Name it something like `Remix Dev` and leave it as `Read-only`.
3. Copy the token and paste it into `.env` as the value for `STRAPI_API_TOKEN`.
4. Start or restart the Remix dev server by running `npm run dev` in the Remix app directory, and also make sure the Strapi server is running by running `yarn develop` in the Strapi app directory.
5. If you open http://localhost:3000 in a browser, you should see your Productivity Tips app containing any Tip data you've created in the Strapi Admin GUI!

![A screenshot of the Remix Productivity Tips app.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnxhag6te394017najeu.png)

Nice job! Local development is done! Time to deploy our code to Render.

### Deploy Everything to Render

We will use [Render Blueprints](https://render.com/docs/infrastructure-as-code) to make deploying and connecting these two services faster and less error-prone. A Render Blueprint is defined using a single `render.yaml` file. [That file](https://github.com/render-examples/strapiconf2022-workshop-strapi/blob/main/render.yaml) lives in the Strapi repository for these two applications.

Follow the instructions in the [Deploy to Production on Render](https://github.com/render-examples/strapiconf2022-workshop-strapi#deploy-to-production-on-render) section of the Strapi repository's README. You'll make minor changes to the `render.yaml` file to make sure it deploys the code from your copies of the example repositories. Then you’ll perform the initial deploy, generate a production Strapi API token, and update the deployed production Remix service with that API token.

![A screenshot showing a successfully deployed Blueprint for the Productivity Tips app.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po0oj4vfguyu2mm3iede.png)

Now you have your very own Productivity Tips app with which you and your coworkers can collect and share all your best productivity tips! Start adding tips using the Strapi Admin GUI, and then share the Remix service's URL with your team.

## Customize

I encourage you to extend the Remix and Strapi applications to customize them for your needs! Here are some ideas for inspiration.

- Add a search bar so your coworkers can search for tips about a specific topic or tool. Algolia’s [React InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/) library might be useful for this.
- Add a login page to restrict use of the Remix app to only approved users. Use OAuth with Google or GitHub login so you don’t have to write code to manage user accounts and password resets. Okta has guides for adding [Google](https://developer.okta.com/docs/guides/add-an-external-idp/google/main/), [GitHub](https://developer.okta.com/docs/guides/social-login/github/main/), and many other login providers to a web application. If you don’t want to use a 3rd party login provider, you could [store and manage users directly in Strapi](https://strapi.io/blog/a-beginners-guide-to-authentication-and-authorization-in-strapi).
- Make the screenshot thumbnails for each productivity tip clickable and zoomable. Strapi’s Cloudinary plugin that we're using automatically creates small, medium, and large versions of images you attach to a Tip, but I didn’t have time to add more than the thumbnail view to the Remix app.
- Replace [Pico.css](https://picocss.com) with a different [minimal CSS theme](https://github.com/troxler/awesome-css-frameworks#general-purpose), or even add your own styling to match your company or team’s brand colors.

[Let me know](https://twitter.com/crc) if you implement any of these! If they would be useful to others, I’ll consider merging them into the example repositories!