Serverless Side Rendering 2: Remix

K - Jan 19 '22 - - Dev Community

So, Remix made server-side rendering in JavaScript-land a thing again; who would have thought?

I wrote an article about doing it with Preact, but it was a bit of fiddling around because, well, I'm not one of the most skilled developers out there.

Anyway, Remix is out in the open and pretty rad. All my "old school" web knowledge from before SPAs is hip again. And the best thing is, it works serverless with solutions like Cloudflare Pages!

Infinite scale, edge located, on-demand payment? This is awesome!

So, let's take a look at how to set things up. The stack I'm starting with is:

Remix does server and client-side rendering, and Tailwind seems the best option here. I tried Chakra, AntD, and Blueprint without much luck.

For production systems, where I had to hand-roll CSS from Sketch files, I would use inline styles (CSS-in-JS), and Tailwind seems to be the logical evolution of this, without the need for JS. The utility classes are more potent than inline styles, but I can use them in the same place.

Tailwind 3 has a bundler that only includes used styles inferred from your JS/TS files, so you usually end up with <20KB of CSS.

Chakra and Blueprint use CSS-in-JS and, in turn, will generate JS. Currently, this requires rather much boilerplate code to get it working, and if I understood it correctly, it would need two render passes in the end, so not the best solution anyway.

AntD uses one big (>500kb) CSS file or some kind of weird babel transform to convert your component imports to component/CSS import.

While all the Tailwind classes don't seem clean, at least the build process is.

Storybook is a must here because all the UI kits I found based on Tailwind are ... well ... a bit heavy on the CSS classes side of things, haha. They don't provide React components out of the box, but only many HTML elements, so you have to create your React components yourself. Storybook really helps with that process.

Cloudflare Pages, because I like Cloudflare Workers, and Pages comes with a bit of deployment help on top. It's just a higher-level service built on Workers anyway. And, as I said, I'm not really the low-level dev.

So, let's dive in!

Prerequisites

We're using Node.js 16 for this, a Cloudflare and a GitHub account.

Setup

First, we initialize the Remix project. 

$ npx create-remix@latest example
$ cd example
Enter fullscreen mode Exit fullscreen mode

Choose "Cloudflare Pages" as the deployment target. This will set up the project with Wrangler, Cloudflare's CLI dev-tool. Also, TypeScript is the way!

Then, we add all packages required for Tailwind:

$ npm add -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Initializing Tailwind is the next step; as I said, version 3 uses a bundler that generates small CSS on the fly.

$ npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Storybook setup is next:

$ npx sb init
Enter fullscreen mode Exit fullscreen mode

Configuring Tailwind

The tailwind.config.js file should look like this:

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

When the Tailwind bundler runs, it creates its CSS file at app/styles/app.css, so we need to import that file in the app/root.tsx file.

import styles from "~/styles/app.css"
export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }]
Enter fullscreen mode Exit fullscreen mode

Remix allows every component and page (pages are components too) to export a links function that can return <link> elements which are added to the <head>. Since we have all our styles in one CSS file, we can export it to the root element of our application.

The Tailwind bundler also needs a base CSS file at styles/app.css (yes, this doesn't go into the app directory!) containing these three lines:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

We need to update the scripts in package.json to run the Tailwind bundler alongside the wrangler CLI.

"scripts": {
    "build": "cross-env NODE_ENV=production npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "cross-env NODE_ENV=development run-p dev:*",
    "postinstall": "remix setup cloudflare-pages",
    "dev:remix": "remix watch",
    "dev:wrangler": "wrangler pages dev ./public --watch ./build",
    "dev:tailwind": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
    "start": "npm run dev:wrangler",
    "dev:storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
}
Enter fullscreen mode Exit fullscreen mode

I used the scripts generated from Remix and Storybook as a base, including scripts for Wrangler and Storybook.

The run-p package allows us to run multiple scripts in parallel; Remix installed it when we initialized the project with the Cloudflare deployment target.

With the Remix and Wrangler CLIs, we already had two. So we just need to add one for tailwind and storybook with the correct dev: prefix, so they get all started simultaneously.

This way, CSS gets bundled up with every change, and we can see it in the Remix app AND the Storybook right away!

As you can see, it uses the CSS file in styles as a base and creates a bundled-up version in app/styles as output.

Configuring Storybook

Let's get Storybook working with Tailwind!

First, we need to import the CSS file Tailwind bundled into Storybook. This can be done with an import in .storybook/preview.js

import "../app/styles/app.css"
Enter fullscreen mode Exit fullscreen mode

Then we need a Tailwind-based component to test if everything is working. For this, let's create a Button at app/components/button.tsx.

import { MouseEventHandler } from "react"

export interface ButtonProps {
  onClick?: MouseEventHandler<HTMLButtonElement>
  text: string
}

export default function Button(props: ButtonProps) {
  return (
    <button
      className="bg-slate-500 text-gray-50 rounded p-2"
      onClick={props.onClick}
    >
      {props.text}
    </button>
  )
}
Enter fullscreen mode Exit fullscreen mode

We can use this component in our Remix app in the app/routes/index.tsx file if we're already at it.

import Button from "~/components/button"

export default function Index() {
  return <Button text="Hello, world!" />
}
Enter fullscreen mode Exit fullscreen mode

We also need a stories file to display that button inside Storybook. Let's create one at stories/button.stories.tsx.

import { ComponentStory, ComponentMeta } from "@storybook/react"

import Button from "../app/components/button"

export default {
  title: "Button",
  component: Button,
} as ComponentMeta<typeof Button>

export const Regular: ComponentStory<typeof Button> = () => (
  <Button text="Hello!" />
)
Enter fullscreen mode Exit fullscreen mode

Running the Development Servers

Let's test everything by running all the dev servers.

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

This will start the Remix server, the Tailwind bundler, and the Storybook server. The HTTP servers endpoints should be opened in the browser automatically after the servers are up; Storybook takes a bit longer here.

In one tab, we see how our Button integrates with the Remix application; in the other, we see it in the Storybook application.

Deploying to Cloudflare Pages

Now, to the serverless part of things!

To deploy the whole shebang to Cloudflare Pages, we need a GitHub repository. Cloudflare will watch for commits to that repository to trigger its deployments.

To create a new repo at GitHub, got to repo.new.

Then, initialize one repo locally, commit all files, link the local repo it up with your GitHub, and push the changes.

$ git init
$ git add -A
$ git commit -m "Init"
$ git remote add origin git@github.com:>GITHUB_USERNAME>/<GITHUB_REPO_NAME>.git
$ git branch -M main
$ git push -u origin main
Enter fullscreen mode Exit fullscreen mode

After that, Cloudflare Pages can use our repository to deploy our app. Go to the dashboard to set things up.

On the sidebar on the left is a "Page" link where you can set up a new project.

Choose your GitHub project and the "Remix" framework.

We also need to set an environment variable, so the correct Node.js version is used by Cloudflare Pages to run Remix' build command.

NODE_VERSION=v16.7.0
Enter fullscreen mode Exit fullscreen mode

After all is set up correctly, we just have to wait for the deployment to finish. This can take a few minutes.

In the end, Cloudflare Pages presents you with a link to your freshly deployed serverless side rendered Remix application.

When we throttle the network in the dev-tools to slow 3G, we should see around 2 seconds for the HTML and 2 seconds for the CSS to load.

If we disabled JavaScript, all interaction is handled inside a Cloudflare Worker, so nothing more has to be downloaded.

If we enabled it, things get a bit more sluggish on the first visit, since all that JS has to be downloaded. But at least on my machine this is still takes only around 5 seconds.

Conclusion

Setting up this new and exciting stack isn't a big deal. Remix allows for easy CSS integration, and Tailwind generates a basic CSS file, a match made in heaven!

Storybook is a good addition since Tailwind is more on the hand-rolled side of things. This gives you flexibility, but you also need a way to check if everything works right!

Image
How to Promote Your Business with Influencer Marketing

ai, productivity, development, wordpress
Image
Pankaj Dureja's Guide to Crafting Robust Data Pipelines Across Diverse Domains

productivity
Image
Sealed Classes en Java

java, programming, spanish
Image
Perfect Elixir: Onboarding

elixir, tutorial, development, webdev
Image
Impl Snake For Micro:bit - Embedded async Rust on BBC Micro:bit with Embassy

rust, embeddedsystems, embassy, microbit
Image
NGV: writing frontend plugins

webdev, extensions, javascript
Image
Adding a Composite Door Cat Flap
Image
A modern 3D viewer framework series

webdev, opensource, gis, javascript
Image
Here are some formatting and design tips to follow when writing a cover letter:

tutorial, productivity, career, opensource
Image
Thunder Client Guide: The Ultimate Guide to Mastering Thunder Client CLI

cli, api, apitesting, node
Image
Why Asbestos Mesothelioma Treatment Doesn't Matter To Anyone
Image
How to Implement and Debug Digest Authentication in REST APIs

restapi, webdev, beginners, java
Image
Top 7 Affordable Queen Mattresses in Ventura, CA – Find Your Dream Bed at American Mattress Family
Image
10 Websites To Help You Learn To Be An Expert In Average Payout For Asbestosis
Image
Here are some formatting and design tips to follow when creating your resume:

beginners, programming, tutorial, opensource
Image
ActiveAdmin v4 Beta: New Features, Upgrades, and How to Migrate

ruby, rails, webdev
Image
A Brief History Of Asbestos Compensation Payouts History Of Asbestos Compensation Payouts
Image
Understanding APIs: The Bridge Between Applications

api, apitesting, beginners, devops
Image
A Comprehensive Guide To Self Propelled Wheelchair Uk From Start To Finish
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .