Creating a New Remix App

Getting started with a new framework means familiarizing yourself with its primitives, conventions, and levers. This book uses a demo application that we will build from start to finish. Each chapter focuses on one specific topic of full stack web development with Remix. In this chapter, we will explore explore the breadth of Remix’s create-remix CLI script, introduce Remix’s file and folder structure, and familiarize ourselves with Remix’s runtime.

This chapter covers the following topics:

• Creating a “Hello World!” Remix app
• Understanding Remix’s file and folder structure
• Exploring the client and server environments
• Troubleshooting Remix applications

First, we will walk through the setup of a new Remix project using the create-remix CLI script. The chapter then introduces you to Remix’s folder structure. We will investigate each file and learn about its function. Next, we will discuss...

Technical requirements

To complete this chapter, you will need a computer that can run Node.js. All common operation systems should suffice. Please install both Node.js and npm on your machine. An editor such as VS Code is recommended.

You can download Node.js and npm here: https://nodejs.org/en/download/.

The solution for this chapter can be found here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/02-creating-a-new-remix-app. Try to read through this chapter first before peeking at the final code.

Creating a “Hello World!” Remix app

This section walks you through the creation of a new Remix application using the create-remix CLI script. The script is maintained by the Remix team and used to bootstrap new Remix projects:

1. Open a new terminal window and run the following command:

   npx create-remix@2

   We use npx to execute the create-remix script. npx is part of npm and stands for Node Package Execute. The command lets us run remote node scripts locally on our machine – pretty nifty!

   Note that we specify to use the latest available version of create-remix v2. The examples in this book are based on Remix v2. By adding the @2 postfix to the package name, we ensure that our first demo application installs a Remix v2 application.

   For projects outside of this book, we recommend using the following command instead to work with the latest stable version of Remix:

   npx create-remix@latest

2. If you are asked by npx to install create-remix, enter y to answer with yes...

Understanding Remix’s file and folder structure

Remix takes on the responsibilities of a compiler, router, and runtime. It provides the foundations and framing for the application. As such, it proposes a skeleton folder structure for the application. Some files serve as entry points that you can hook into. Others can be used to configure Remix. Let’s review our bootstrapped Remix app.

Which files and folders are present depends on the selected configuration options during the creation process. However, most files are part of all setups. Selecting the basic Remix App Server template yields the following file and folder structure:

my-remix-app├── .eslintrc.js
├── .gitignore
├── README.md
├── app
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root...

Exploring the client and server environments

In this section, you will learn about the two environments of every Remix application: the client and the server. First, we will learn more about how code is executed during runtime. Next, you will learn where to write your client and server code and how to help Remix’s compiler recognize what belongs in the client bundle and what belongs in the server bundle.

The two bundles of your Remix application

The Remix App Server does not expose its server setup, but most other templates do. In this section, we will use the Express.js template to review how Remix interacts with the web server.

Follow these steps to bootstrap an Express.js Remix app:

1. Run the following create-remix command in a terminal:

   npx create-remix@2 --template remix-run/remix/templates/express

   This time, we don’t use the basic template but Remix’s Express.js template.

   Note that the --template flag points to a folder on GitHub.com, using the...

Troubleshooting Remix applications

In this section, you will learn more about debugging Remix applications. First, we will provide you with a general process to approach issues while developing with Remix. Next, we will document how to best search for answers and get help from the community.

A Remix troubleshooting process

Remix is not a server but runs on top of a web server and an underlying server runtime environment. Remix acts as an HTTP request handler, orchestrates your routes, executes your code during runtime, and acts as your compiler. Quite a few things can go wrong. That’s why it’s important to practice the process of debugging in Remix.

In the last section, we learned more about Remix’s two environments, the client and the server. Remix runs on the server and then executes logic inside the browser. Hence, when debugging your Remix application, we must investigate both the client and the server environment. Let’s break the Hello World...

Summary

In this chapter, we created our first Remix application. We used Remix’s create-remix CLI script to bootstrap one Remix app with the basic template and one using Remix’s Express.js template.

By following this chapter, you have learned how to build and run Remix applications locally using npm run dev and npm run build. More importantly, you understand where to find all available scripts (package.json) and additional information for running a specific template (README.md).

We reviewed Remix’s file and folder structure. After reading this chapter, you know about the client and server entry points: entry.client.tsx and entry.server.tsx.

We also spent some time investigating the root.tsx file. The root.tsx file acts as the root of the route tree. Remix utilizes React to render the full HTML document, including the head, bundled scripts, links, and meta tags. This provides full control over what is rendered on the screen.

We changed the code of the...

Further reading

You don’t need to use create-remix to bootstrap a new Remix project. You can also start from scratch by installing Remix’s dependencies and setting up the file and folder structure yourself. If you are curious about this approach, follow the 5-minute tutorial from the Remix documentation: https://remix.run/docs/en/2/start/quickstart.

We introduced you to the Remix App Server. You can read more about the Remix’s basic template here: https://remix.run/docs/en/2/other-api/serve.

As mentioned earlier in the chapter, refer to Remix’s own troubleshooting guide to get help with common gotchas: https://remix.run/docs/en/2/guides/gotchas.