DEV Community

loading...
Cover image for a first look at remix

a first look at remix

ajcwebdev profile image anthony-campolo ・2 min read

Back in June I wrote a short blog post about Remix. When the project was released to the world last year in October I was still dirt poor, but now I've got fat stacks and can afford the license, so here you go.

Setup

Clone the example repo

git clone https://github.com/remix-run/starter-express.git ajcwebdev-remix
cd ajcwebdev-remix
Enter fullscreen mode Exit fullscreen mode

Set environment variable in .npmrc.example

This tells npm where to find @remix-run packages. Swap out <Remix License Key> below with your key from remix.run. If this is a public repo, you'll want to move your key into ~/.npmrc to keep it private.

//npm.remix.run/:_authToken=<Remix License Key>
@remix-run:registry=https://npm.remix.run
Enter fullscreen mode Exit fullscreen mode

Scripts

"scripts": {
  "build": "remix build",
  "dev": "pm2-dev pm2.config.js",
  "start": "node server.js"
},
Enter fullscreen mode Exit fullscreen mode

Change .npmrc.example to .npmrc

mv .npmrc.example .npmrc
Enter fullscreen mode Exit fullscreen mode

Install dependencies

npm i
Enter fullscreen mode Exit fullscreen mode

Fire it up

npm run dev
Enter fullscreen mode Exit fullscreen mode

Output:

============================================================
--- PM2 development mode -----------------------------------
Apps started         : Express,Remix
Processes started    : 2
Watch and Restart    : Enabled
Ignored folder       : node_modules
============================================================
Express-0  | Express server started on http://localhost:3000
Remix-1    | Remix dev server running on port 8002...
Enter fullscreen mode Exit fullscreen mode

Open localhost:3000

01-index-js

index.tsx

Hopefully you like TypeScript!

import type {
  MetaFunction,
  LinksFunction,
  LoaderFunction
} from "@remix-run/react";
import { useRouteData } from "@remix-run/react";

import styles from "url:../styles/index.css";

export let meta: MetaFunction = () => {
  return {
    title: "Remix Starter",
    description: "Welcome to remix!"
  };
};

export let links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: styles }];
};

export let loader: LoaderFunction = async () => {
  return { message: "this is awesome 😎" };
};

export default function Index() {
  let data = useRouteData();

  return (
    <div style={{ textAlign: "center", padding: 20 }}>
      <h2>Welcome to Remix!</h2>

      <p>
        <a href="https://remix.run/dashboard/docs">Check out the docs</a> to get started.
      </p>

      <p>Message from the loader: {data.message}</p>

    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Change stuff

return (
  <div style={{ textAlign: "center", padding: 20 }}>
    <h2>ajcwebdev</h2>

    <p>
      <a href="https://dev.to/ajcwebdev">Blog</a>
    </p>

    <p>Message from the loader: {data.message}</p>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

02-index-js-edit

Yeet it across the internet

export let loader: LoaderFunction = async () => {
  return { yeet: "yeet it across the internet" };
};
Enter fullscreen mode Exit fullscreen mode
  return (
    <div style={{ textAlign: "center", padding: 20 }}>
      <h2>ajcwebdev</h2>

      <p>
        <a href="https://dev.to/ajcwebdev">Blog</a>
      </p>

      <p>{data.yeet}</p>
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

Return to localhost:3000

03-yeet-it

Discussion (0)

Forem Open with the Forem app