How to Build an App with Remix

Getting Started with Remix

Building web applications has evolved significantly with the introduction of modern frameworks. One such framework that stands out is Remix. Remix is a full stack web framework that allows developers to create fast, dynamic, and scalable web applications. In this article, we’ll walk through the process of building a simple app using Remix, complete with coding examples to guide you along the way. By the end, you’ll have a comprehensive understanding of how to leverage Remix to build robust applications. Before we dive into coding, let’s set up our environment.

Installing Node.js and npm

To get started with Remix, ensure you have Node.js and npm installed on your machine. You can download and install Node.js from nodejs.org. npm is included with Node.js.

Creating a New Remix App

First, we need to create a new Remix app. Open your terminal and run the following command:

bash

npx create-remix@latest

This command will prompt you to choose a project name and a template. For this tutorial, we’ll use the remix template.

bash

? Where would you like to create your app? ./my-remix-app

? Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment targets. Remix App Server

? TypeScript or JavaScript? TypeScript

? Do you want me to run `npm install`? Yes

After the installation, navigate to your project directory:

bash

cd my-remix-app

Running the Development Server

To start the development server, run:

bash

npm run dev

Your Remix app should now be running at http://localhost:3000. Open this URL in your browser to see the default Remix welcome page.

Understanding the Remix File Structure

A typical Remix project has the following structure:

arduino

my-remix-app/

├── app/

│   ├── entry.client.tsx

│   ├── entry.server.tsx

│   ├── root.tsx

│   ├── routes/

│   │   └── index.tsx

├── public/

├── remix.config.js

├── package.json

app/: This is where your application code lives.
public/: Static files like images, CSS, and JavaScript go here.
remix.config.js: Configuration file for Remix.

Creating Routes

Routes in Remix are created in the app/routes directory. Let’s create a simple blog with routes for listing posts and viewing a single post.

Creating the Blog Post List Route

First, create a file named posts.tsx in the app/routes directory:

tsx

// app/routes/posts.tsx

import { Link } from "@remix-run/react";

const posts = [
{ id: 1, title: “First Post” },
{ id: 2, title: “Second Post” },
];export default function Posts() {
return (
<div>
<h1>Blog Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link to={`/posts/${post.id}`}>{post.title}</Link>
</li>
))}
</ul>
</div>
);
}

This component lists all blog posts and links to their respective pages.

Creating the Blog Post Detail Route

Next, create a file named $postId.tsx in the app/routes/posts directory:

tsx

// app/routes/posts/$postId.tsx

import { useParams } from "@remix-run/react";

This component displays the content of a single blog post based on the postId parameter in the URL.

Working with Data in Remix

Remix offers seamless data loading via loaders. Let’s fetch data from an API instead of using hardcoded posts.

Setting Up the API

For simplicity, we’ll use the JSONPlaceholder API to fetch posts. Update the posts.tsx file to use a loader:

tsx

// app/routes/posts.tsx

import { json, LoaderFunction, useLoaderData } from "remix";

export const loader: LoaderFunction = async () => {
const response = await fetch(“https://jsonplaceholder.typicode.com/posts”);
const posts = await response.json();
return json(posts);
};export default function Posts() {
const posts = useLoaderData();return (
<div>
<h1>Blog Posts</h1>
<ul>
{posts.map((post: { id: number, title: string }) => (
<li key={post.id}>
<Link to={`/posts/${post.id}`}>{post.title}</Link>
</li>
))}
</ul>
</div>
);
}

Updating the Post Detail Route

Update the $postId.tsx file to fetch the post data from the API:

tsx

// app/routes/posts/$postId.tsx

import { json, LoaderFunction, useLoaderData, useParams } from "remix";

export const loader: LoaderFunction = async ({ params }) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.postId}`);
const post = await response.json();
return json(post);
};export default function Post() {
const post = useLoaderData();if (!post) {
return <div>Post not found</div>;
}return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
}

Styling Your Remix App

Remix supports various styling methods including CSS, Sass, and CSS-in-JS libraries. For this tutorial, we’ll use simple CSS.

Adding CSS to Your App

Create a styles directory in the app folder and add a global.css file:

css

/* app/styles/global.css */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

}

h1 {
color: #333;
}ul {
list-style: none;
padding: 0;
}li {
margin: 0.5rem 0;
}

Import the CSS file in root.tsx:

tsx

// app/root.tsx

import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "remix";

import globalStyles from "./styles/global.css";

export function links() {
return [{ rel: “stylesheet”, href: globalStyles }];
}export default function App() {
return (
<html lang=“en”>
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}

Deploying Your Remix App

Remix apps can be deployed to various platforms including Vercel, Netlify, and Fly.io. For this tutorial, let’s deploy our app to Vercel.

Install the Vercel CLI

bash

npm install -g vercel

Run the following command in your project directory

bash

vercel

Follow the prompts to link your project to a Vercel account and deploy it.

Conclusion

In this tutorial, we covered the basics of building a web application using Remix. We started by setting up a new Remix project, creating routes for displaying a list of blog posts and individual post details, and fetching data from an external API. Additionally, we styled our application and discussed how to deploy it to Vercel.

Remix is a powerful framework that simplifies many aspects of web development, from data loading to routing and deployment. Its focus on performance and developer experience makes it an excellent choice for modern web applications. By following the steps outlined in this article, you should now have a solid foundation to build upon and explore more advanced features of Remix.