[Document] Welcome Remix Docs

in this session, we will focus on user-created interfaces and learn about Remix, which provides a fest,flexible, and resilient environment.

The parts described in the Remix offical document are as followers.

Remix is a full stack web framework taht lets you foucs on the user interface and work back through web fundamentales to deliver a fast, slick, and resilient user experience, People are gonna love using your stuff.

As explained above, Remix seems to provide a fast and resilient environment while focusing on the user-delveoped interface!!

First, before using Remix, let's have time to organize what is defined in the offical document.

Remix is a samless server and browser runtime.

Remix uses distributed systems and native browser functions instead of rough static builds.

It's a runtime that providers page loading, instant screen switching, and providers the server and browser you want.

It already runs on Cloudflare Workers by default. supporting the environment for existing Node.js without servers.

You can use it as you want.

Page loading speed is just one goal we pursue.

We're after better user experiences. As you've pushed the boundaries of the web.

you'r tools haven't caught up to your appetite.

Remix is ready to server you form the initial request to the fanciest UX your designers can think up Check it out 👀

The official docuemnt tutorial

From now on, I will follow the tutorial referring to the official document.

Getting Started

npx create-remix@latest

Run cmd in the folder to develop the project and enter it as followers.

yarn start & npm start

The Remix is the same as the existing React execution method.

Rmeix can be deployed in a large and growing list of Javascript environments,

The "Remix App Server" is a full-featured Node.js server based on Express.

It's the simplest option and it satisfies most people's needs, so tats's what we're going with

for this tutorial. Feel free to experiment in the future!

Once the npm install has completed, we'll change into remix-jokes direcory:

remix-jokes
├── README.md
├── app
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root.tsx
│   └── routes
│       └── index.tsx
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── remix.config.js
├── remix.env.d.ts
└── tsconfig.json

Let me explain some of the files configured in the next Remix:

app/ - This is where all remix-related codes are executed.
app/entry.client.tsx - This is the first bit of your Javascript that will run when the app loads in the
browser. We use this file to hydrate our React components.
app/root.tsx - This is where we put the root component for our application. You render the
<html>element here.
app/routes/ - This is where all your "route modlues" will go. Remix uses the files in this directory to
create the URL routes for your app based on the name of the files.
public/ - This is where your static assets go (images/fonts/etc)
remix.config.js - Remix has a handful of configuration options you can set in this file.

Next. let's run the build.

npm run build

When entering the above code, output the following results.

Building Remix app in production mode...
Built in 132ms

There should now be a .cache/directory (directory used internally by Remix.)

build/direcory, and public/build directory as well. Build/directory is server-side code.

We have public/build/all client-side codes. Since these three directories are listed in the .gitnore file,

they do not commit the generated files to source control.

Let's run the built app now;

npm start && yarn start

This is will start the server and output this:

Remix App Server started at http://localhost:3000

Open up that URL and you should be presented with a minimal page pointing to some docs.

The official docuemnt tutorial

티스토리툴바