nh

Remix - Getting Started with Remix (Part 1)

post javascript remix firebase

Instructions to deploy a Remix application using Firebase and App Engine Vercel. I'll be using vanilla JavaScript, but feel free to implement your solution in TypeScript if you wish. Please also note, I won't be building a full application, but rather exploring the integration of Remix with Firebase as a means to an end. There will be plenty of undeveloped tasks for the reader to complete.

UPDATE (February 10th, 2022): I've created a starter project based on the initial exploration I did in this walkthrough series. You can find my more structured TypeScript implementation on GitHub: https://github.com/nathanhumphrey/remix-app. The repo README provides a high-level overview of the details, and the project comes with some sample impementations.

Create a Remix Project #

Create a new Remix project in your terminal:

$ npx create-remix@latest
# choose Remix App Server
$ cd [whatever you named the project]
$ npm run dev
# cmd+c / ctrl+c to kill the dev server

We'll build a simple app that allows a user to sign in and manage some secrets (like a private todo app). To get there, we'll clean up the starter app we just created and build some basic routes that we can use for moving forward. Let's begin!

Update the Root #

The first thing we need to do is clean up the root route. The root is unique in Remix in that it determines the application layout. All other routes will be placed in the routes/ directory to become application routes. It's already pretty bare, so we'll remove some unnecessary links for the routes we're going to remove.

Note: I'm primarily just repurposing the layout components presented in the Developer Blog tutorial on the Remix docs site. Feel free to check out that tutorial to get more information about the basics of Remix. 

// app/root.jsx
...
function Layout({ children }) {
  return (
    <div className="remix-app">
      <header className="remix-app__header">
        <div className="container remix-app__header-content">
          <Link to="/" title="Remix" className="remix-app__header-home-link">
            <RemixLogo />
          </Link>
          <nav aria-label="Main navigation" className="remix-app__header-nav">
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
            </ul>
          </nav>
        </div>
      </header>
      <div className="remix-app__main">
        <div className="container remix-app__main-content">{children}</div>
      </div>
      <footer className="remix-app__footer">
        <div className="container remix-app__footer-content">
          <p>&copy; You!</p>
        </div>
      </footer>
    </div>
  );
}
...

root.jsx - removed unnecessary links

Next, let's clean out the routes directory. Remove all files and directories except for the index.jsx. Update index.js for our new secrets app.

export let meta = () => {
  return {
    title: 'Remix Secrets App',
  };
};

export default function Index() {
  return (
    <div className="remix__page">
      <main>
        <h2>Remix Secrets</h2>
        <p>Save all your secret stuff here!</p>
      </main>
    </div>
  );
}

app/index.jsx - updated for secrets

You'll notice that I'm keeping everything pretty simple. The reason is to focus on the tasks that I've set out to complete rather than creating some fantastic app. The index route will be the publicly available route, and we'll create a private route for accessing the secrets. Create a new secrets.jsx file in the routes directory.

// routes/secrets.jsx
export let meta = () => {
  return {
    title: 'Remix Secrets App - Secrets Page',
  };
};

export default function Secrets() {
  return (
    <div className="remix__page">
      <main>
        <h2>Remix Secrets (Private)</h2>
        <p>Eventually, your secrets will appear here.</p>
      </main>
    </div>
  );
}

app/routes/secrets.jsx - future protected route

Summary #

Okay, so now that we have our two required routes, let's move on to the next part in this series, where we will add Firebase Authentication to the app.

References #

Top