Setting Up a Remix JS Project

Hey there, fellow developers! Ready to dive into the exciting world of Remix JS? Today, we're going to walk through the process of setting up a Remix project from scratch. By the end of this guide, you'll have a solid foundation to start building amazing web applications with Remix. Let's get started!

What is Remix JS?

Before we jump into the setup, let's quickly recap what Remix JS is all about. Remix is a full-stack web framework that leverages the power of React and modern web standards to create fast, scalable, and user-friendly applications. It's designed to make building better websites easier by focusing on web fundamentals and optimal user experiences.

Prerequisites

To follow along with this tutorial, you'll need:

Node.js (version 14 or later) installed on your machine
A basic understanding of JavaScript and React
A terminal or command prompt
Your favorite code editor (I'll be using Visual Studio Code)

Step 1: Creating a New Remix Project

Let's start by creating a new Remix project. Open your terminal and run the following command:


npx create-remix@latest my-remix-app

This command will create a new directory called my-remix-app with a basic Remix project structure.

During the setup process, you'll be asked a few questions:

Where do you want to deploy? Choose "Remix App Server" for this tutorial.
TypeScript or JavaScript? Choose based on your preference (we'll use JavaScript for this guide).
Do you want me to run npm install? Answer "Yes" to install the dependencies automatically.

Step 2: Exploring the Project Structure

Once the installation is complete, navigate to your project directory:


cd my-remix-app

Now, let's take a look at the project structure:


my-remix-app/
├── app/
│   ├── entry.client.jsx
│   ├── entry.server.jsx
│   ├── root.jsx
│   └── routes/
│       └── index.jsx
├── public/
│   └── favicon.ico
├── package.json
├── README.md
└── remix.config.js

Here's a brief explanation of each file and directory:

app/: This is where most of your application code will live.
entry.client.jsx: The entry point for the browser-side of your app.
entry.server.jsx: The entry point for the server-side of your app.
root.jsx: The root component of your application.
routes/: Contains your route components.
public/: Static assets that will be served directly.
package.json: Project dependencies and scripts.
remix.config.js: Configuration options for your Remix app.

Step 3: Running Your Remix App

To start your Remix app in development mode, run:


npm run dev

This command will start the development server, and you should see output indicating that your app is running. By default, you can access your app at http://localhost:3000.

Step 4: Creating Your First Route

Let's create a simple "About" page to understand how routing works in Remix. Create a new file called about.jsx in the app/routes directory:


// app/routes/about.jsx

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our Remix JS project! We're excited to have you here.</p>
    </div>
  );
}

Now, if you navigate to http://localhost:3000/about, you'll see your new "About" page.

Step 5: Modifying the Root Component

The root.jsx file is where you can add elements that should appear on every page, like navigation or a footer. Let's update it to include a simple navigation menu:


// app/root.jsx

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import { Link } from "@remix-run/react";

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

This update adds a simple navigation menu that will appear on all pages of your app.

Step 6: Adding Styles

Remix makes it easy to add styles to your application. Let's create a simple stylesheet for our app. Create a new file called app/styles/global.css:


/* app/styles/global.css */

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

To use this stylesheet, import it in your root.jsx file:


// app/root.jsx

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

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

// ... rest of the root component

Wrapping Up

Congratulations! You've successfully set up a Remix JS project, created a new route, added navigation, and included some basic styles. This is just the beginning of your Remix journey. From here, you can start exploring more advanced features like data loading, form handling, and server-side rendering.

Remember, Remix is all about embracing web standards and creating performant, user-friendly applications. As you continue to learn and experiment with Remix, you'll discover how it can help you build better web experiences with ease.

Happy coding, and enjoy your Remix adventure!