End-to-End Guide To Remix, a Full Stack Web Framework | by Jennifer Fu | Mar, 2022

That helps you construct sooner and cleaner

Photograph by Krys Amon on Unsplash

It contains esbuild, React Router, server-side rendering, manufacturing server, and backend optimization.

Remix is a full-stack net framework that focuses on the consumer interface and works again by net fundamentals to ship a quick, slick, and resilient consumer expertise.

Because the formal launch on October 2021, Remix has gained steam to be a extensively adopted React framework.

Picture by creator

Remix comes with an a variety of benefits:

  • It compiles with esbuild, a particularly quick JavaScript/CSS bundler and minifier.
  • It makes use of progressive enhancement on the server facet. Solely vital JavaScript, JSON, and CSS content material are despatched to the browser.
  • It performs dynamic server-side rendering.
  • It is aware of when to refetch mutated information, as Remix oversees the entire workflow.
  • It contains an end-to-end answer with React Router, server-side rendering, manufacturing server, and backend optimization.

Run the next command to put in Remix:

% npx create-remix
npx: put in 210 in 10.198s
R E M I X - v1.2.3💿 Welcome to Remix! Let's get you arrange with a brand new mission.? The place would you wish to create your app? remix-app
? The place do you need to deploy? Select Remix for those who're not sure, it is easy to alter deployment targets. Remix App Server
? TypeScript or JavaScript? JavaScript
? Would you like me to run `npm set up`? Sure

There are a number of decisions in the course of the set up.

  • The Remix framework is put in within the folder, remix-app.
  • There are a selection of servers to select from. The alternatives are Remix App Server, Categorical Server, Architect (AWS Lambda), Fly.io, Netlify, Vercel, and Cloudflare Pages. We use the default,Remix App Server, which is a full-featured Node.js server based mostly on Categorical.
  • There’s additionally a selection between TypeScript and JavaScript. On this article, JavaScript is chosen.

After the set up, the folder, remix-app, seems to be like this:

remix-app
├── README.md
├── app
│ ├── entry.consumer.jsx
│ ├── entry.server.jsx
│ ├── root.jsx
│ └── routes
│ └── index.jsx
├── node_modules
├── bundle.json
├── package-lock.json
├── public
│ └── favicon.ico
├── .eslintrc.js
├── .gitignore
├── remix.config.js
└── jsconfig.json
  • app/entry.server.jsx: It’s the first little bit of JavaScript that may run when a request hits the server. Remix hundreds solely the mandatory information, however builders must deal with the response. This file is used to render the React app to a string/stream that’s despatched as a response to the consumer.
  • app/root.jsx: It’s the root part for the appliance. It’s equal to Create React App’s App.js. <LiveReload /> (line 27) is explicitly coded, which is beneficial for improvement.
  • app/routes: It’s the listing that hosts all routes.
  • app/routes/index.jsx: It’s the listed route that’s invoked by default.
  • public: It’s the listing that hosts static belongings and the manufacturing construct.
  • public/favicon.ico: It’s the Remix icon displayed for the browser tab and bookmark.
  • remix.config.js: It’s the Remix configuration file.
  • jsconfig.js: It’s the JavaScript configuration file.

The app could be executed within the develop mode:

npm run dev

It will also be executed within the manufacturing mode:

npm run construct
npm begin
Picture by creator

Out of the field, we have now React Router, server-side rendering, and manufacturing server.

The above official instance has static hyperlinks to exterior web sites. Rewrite app/routes/index.jsx to hyperlink to inner pages.

Line 9 is a hyperlink to the route, "/one".

Line 12 is a hyperlink to the route, "/two".

The web page seems to be high quality.

Picture by creator

However, clicking on both of the hyperlinks exhibits a 404 error.

Picture by creator

Remix Router makes use of the file system to outline web page routes. There are two methods to deal with this. The beneficial approach is to implement the lacking web page contained in the route listing as an index file, i.e. app/routes/one/index.jsx:

Now the web page works:

Picture by creator

The second approach is to call the file because the route, i.e., app/routes/two.jsx:

Right here is the web page:

Picture by creator

Remix Router helps React Router, together with nested routes and dynamic parameters.

In Remix, a lot of the routes are composed of APIs and UI parts. APIs work together with the backend, whereas UI parts are displayed within the browser. Remix APIs simplify and optimize interactions with the backend, together with the right way to get information into parts and when to carry out information mutations.

The loader perform is a particular API. It’s exported to be known as on the server earlier than rendering. It sometimes fetches information from the backend.

Then, UI parts render the web page utilizing the loaded information by way of the hook, useLoaderData.

We have now written an article, Set Up and Use MySQL in Create React App Environment. Let’s see how simple it’s to arrange and use MySQL within the Remix atmosphere.

Arrange mysql (mysql2 works equally), the JavaScript consumer for MySQL protocol:

npm i mysql

mysql turns into a part of dependencies in bundle.json.

Modify app/routes/index.jsx to be the next:

Strains 4–9 outline the consumer configuration.

Strains 11–13 create MySQL connection utilizing the consumer configuration. Line 12 permits a number of statements, that are disabled by default to keep away from attainable SQL injection assaults.

Strains 15–25 outline the loader perform, which connects to the database to question the scholar desk (line 16). If there may be an error, the promise is resolved to null (line 19). In any other case, the primary row of the MySQL desk is returned (line 22), assuming that there’s at the least one row.

Line 28 calls useLoaderData to retrieve the loaded information, which is rendered at line 33.

There isn’t any must restart the server. npm run dev is just like nodemon, which robotically displays the code adjustments and rebuilds the adjustments.

Nonetheless, there may be an error on the browser console:

What a cryptic error message!

This error happens when the server-side dependencies get bundled within the consumer scripts.

To ensure that Remix to run the app in each the server and browser environments, software modules and third-party dependencies should be cautious about module unwanted side effects. The Remix compiler robotically removes server code from the browser bundles. Within the above code, strains 11–13 create MySQL connection, which is the server code. The loader is gone however the mysql dependency stayed. The browser can’t deal with the mysql module correctly.

To repair this, take away the facet impact by merely shifting the code contained in the loader perform, together with the consumer configuration.

It really works now.

Picture by creator

However, are we going to create a MySQL connection each time the loader perform known as?

A greater approach is to create a MySQL connection inside app/entry.server.jsx (strains 30–32):

Then, app/routes/index.jsx merely imports the connection (line 2):

The <Kind> part is a declarative method to carry out information mutations: creating, updating, and deleting information. Remix’s Kind is an enhanced HTML kind part. As an alternative of utilizing React occasion handlers, similar to onClick, the route exports the motion perform that known as upon kind submission. useState shouldn’t be wanted to keep up area values.

Much like the loader perform, there may be the motion perform, which is invoked upon kind submission. Much like the hook, userLoaderData, there’s a hook for the motion perform, useActionData, which captures the returned information from the motion perform.

We use motion and useActionData to construct up our instance with the potential of modifying the scholar’s grade.

Picture by creator

Right here is the tailored app/routes/index.jsx:

Strains 17–33 outline the motion perform, which reads the shape submission information (strains 18–19) and connects to the database to replace the scholar desk (line 22). If there may be an error, the promise is resolved to an error message (line 26). In any other case, it returns a profitable message (line 28).

Line 37 calls useActionData to retrieve the motion consequence, which is rendered at line 50.

The Kind part is added at strains 44–49.

Save the adjustments, and kind 4 within the enter area. Upon hitting enter, the worth is distributed to motion to replace the database. Remix detects information mutation and calls loader to retrieve the most recent worth to be displayed.

Picture by creator

If the enter is invalid, the error message is displayed.

Picture by creator

The stream between Remix App Server and the backend is seamless. No boilerplate code is required.

We have now gone by the right way to use Remix. It has a variety of benefits, and probably the most noticeable one is velocity — It’s quick to load the web page within the browser, and it’s quick to develop the end-to-end software. Remix is a full-stack Internet framework that features esbuild, React Router, server-side rendering, manufacturing server, and backend optimization.

We have now written about these options in quite a few articles. With Remix, they’re all obtainable, boilerplate-free.

Any disadvantages to Remix?

Sure, Remix continues to be new. Error reporting wants enchancment. For instance, if we wish a server on an occupied port, it doesn’t report an error or recommend a unique port. When it experiences errors, some error messages are too cryptic.

Regardless, Remix has gained steam to be a extensively adopted React framework.

Thanks for studying. I hope this was useful.

More Posts