Remix – a new framework to trick you into fullstack!

A lot of tutorials start with a ToDo-list, and this is one of them. Instead of only working in the browser, this one’s going all the way.

We’ll have a database. And we’ll have a server to handle the form submissions and send the content to the database.

I’ll use SQLite but you can use MySQL, SQL Server, Postgres or MongoDB if you want. I’ll use Prisma as an ORM to handle the communication, and it works with all the above.

I’ll be using the Remix App Server, and run everything on localhost. You can do the same, or deploy somewhere else. Remix works with several. Express Server, Architect (AWS Lambda), Fly.io, Netlify, Vercel or Cloudflare Pages.

I’m using TypeScript, and you should too. It’ll help the IDE to figure out what we’re trying to do, and give us helpful suggestions along the way. I’m using VS Code. You use what you want.

Goal

We’re going to build a simple app, where we can add tasks, and give each task a deadline. The tasks form a list, and we can delete tasks from the list. Either because we’ve done them or because we’ve decided not to.

Here’s a screendump of what that will look like.

We’ll factor out the individual tasks in the list into a separate component, that we call TodoTask.

I used dependency cruiser to generate a diagram of all the files we need. It left one out, but it’s a small one, nothing to worry about, I promise.

There are ten files, of which we’ll create six, alter one and ignore the rest. In the diagram you only see nine, the tenth is the database schema we need for Prisma to do its magic.

The files we’ll create are the four inside ”utilities” and the one in ”components”. Then we will do a lot of adjustments to index.tsx.

Create a Remix app as a starting point

This is the easiest part of the project. Start a terminal and navigate to the folder where you want the project folder to be. Then issue this command:

npx create-remix@latest

You should get this response:

Need to install the following packages:
  create-remix@latest
Ok to proceed? (y)

Press “y” for yes, and this should appear:

R E M I X - v1.2.2

💿 Welcome to Remix! Let's get you set up with a new project.

? Where would you like to create your app? (./my-remix-app)

The top line will look different for you, the version number is likely higher, and the text is in color.

The installer is going to ask you a series of questions, and here they are, with my answers filled in:

? Where would you like to create your app? todoapp
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Remix App Server
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Y

The only questions you need to type anything to answer is the first and last. For all the others I chose the defaults, so press enter to get the same results as I have. The first question is about what you want to call the project directory. The last one makes the installer run npm install when it done.

The next step is to open the project in your IDE. For me that means that I issue these two commands:

cd todoapp
code .

Cheat first

We need a page, with a form to enter the tasks.

Then we want to present each task in a list, and put a button beside the task so that we can delete it.

Let’s fake the data first, and set up our form.

Open index.tsx and remove everything in the function Index() and make it look like this:

export default function Index() {
  const todoList = [{
    id: 1,
    task: "Get started",
    deadline: 1,
  },
  {
    id: 2,
    task: "Do stuff",
    deadline: 2,
  },
  {
    id: 3,
    task: "Finish up",
    deadline: 3,
  }];
  return (
    <div>
      <div>
        <div>
          <form method="post">
	          <input type="text" placeholder="Task..."
	          name="task"/>
	          <input type="text" placeholder="Deadline..."
	          name="deadline" />
		      <button type="submit">Add Task</button>
        </form>
        </div>
      </div>
      <div>
        {todoList.map((task) => {
          return (
            <div key={task.id}>
      <div>
        <span>{task.task}</span>
        <span>{task.deadline}</span>
        <button>×</button>
      </div>
    </div>
          );
        })
      }
      </div>
    </div>
  );
}

Open the terminal in your IDE and give this command:

npm run dev

You should see this in the terminal:

> dev
> cross-env NODE_ENV=development remix dev

(node:21790) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Watching Remix app in development mode...
💿 Built in 431ms
Remix App Server started at http://10.0.1.18:3000

You might not see the warnings, if the Remix team has fixed the experimental feature.

Open a web browser and access localhost:3000, and you should see this:

@@@@skärmdumpen med formulär och lista.

Not much to look at, but we’ll make this into a working todo list with remarkably little effort. We’ll do that in the next article.