We’re going to create our first Remix app, using this command:

npx create-remix@latest

This will create a default starter app using TypeScript.

For simplicity, I’ll use the JavaScript template using the command:

npx create-remix@latest --template remix-run/remix/templates/remix-javascript

Note: there are tons of starter templates already preconfigured to use specific libraries or deployment platforms, see them all here: https://remix.run/docs/en/main/guides/templates

Choose a new folder name, then press enter:

Pick yes to create a Git repository for the project.

Pick yes too to install dependencies with npm.

Done!

Now go in the folder you created, in my case testremix

cd testremix

Now open the folder in VS Code, or whatever is your favorite editor.

You’ll see a bunch of files and folders.

Now in the terminal run npm run dev to start the app in development mode.

Remix started the app on port 3000 and you can open your browser on http://localhost:3000 to see the default starter app in action:

Some new folders will appear in VS Code, like .cache and build, those are folder that hold the temporary data needed to run the application.

What matters the most to us is the app folder.

If you open it, you’ll find those files:

• routes/_index.jsx
• entry.client.jsx
• entry.server.jsx
• root.tsx

NOTE: if you picked a TypeScript template, those files will be *.tsx and contain type annotations.

The job of entry.server.jsx takes care of server-side rendering the markup of the page requested by the browser.

entry.client.jsx is responsible for hydrating the React application in the browser (in other words: loading the client-side JavaScript and mounting the React components client-side as needed).

You mostly don’t need to touch those files unless you want to customize the application at a deeper level.

You don’t even need then now, you could delete them and the Remix app will just keep working with those defaults.

But Remix provides them so you can customize whatever you want later on with ease.

What we are interested mostly is root.jsx file, which defines the root route, and the files in the routes folder.

We’ll talk more about the root.jsx file in the next lesson.

Lessons in this unit: