Remix + Deno

Welcome to the Deno template for Remix! 🦕

For more, check out the Remix docs.

• Remix + Deno
  • Install
  • Managing dependencies
  • Development
    • Type hints
  • Production
  • Deployment
  • Setting up Deno Deploy
    • Deploying to Deno Deploy
  • Useful resources
    • How to use FontAwesome in the project
  • Frequently Used Commands
    • Prisma commands
    • PlanetScale commands
  • Contributors ✨

Install

npx create-remix@latest --template deno

Managing dependencies

Read about how we recommend to manage dependencies for Remix projects using Deno.

• ✅ You should use npm to install NPM packages

  npm install react

  import { useState } from 'react'

• ✅ You may use inlined URL imports or deps.ts for Deno modules.

  import { copy } from 'https://deno.land/std@0.138.0/streams/conversion.ts'

• ❌ Do not use import maps.

Development

From your terminal:

npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Type hints

This template provides type hinting to VS Code via a dedicated import map.

To get types in another editor, use an extension for Deno that supports import maps and point your editor to ./.vscode/resolve_npm_imports.json.

For more, see our decision doc for interop between Deno and NPM.

Production

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Deployment

Building the Deno app (npm run build) results in two outputs:

• build/ (server bundle)
• public/build/ (browser bundle)

You can deploy these bundles to any host that runs Deno, but here we'll focus on deploying to Deno Deploy.

Setting up Deno Deploy

1. Sign up for Deno Deploy.

2. Create a new Deno Deploy project for this app.

3. Replace <your deno deploy project> in the deploy script in package.json with your Deno Deploy project name:

   {
     "scripts": {
       "deploy": "deployctl deploy --project=<your deno deploy project> --include=.cache,build,public ./build/index.js"
     }
   }

4. Create a personal access token for the Deno Deploy API and export it as DENO_DEPLOY_TOKEN:

   export DENO_DEPLOY_TOKEN=<your Deno Deploy API token>

   You may want to add this to your rc file (e.g. .bashrc or .zshrc) to make it available for new terminal sessions, but make sure you don't commit this token into git. If you want to use this token in GitHub Actions, set it as a GitHub secret.

5. Install the Deno Deploy CLI, deployctl:

   deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts

6. If you have previously installed the Deno Deploy CLI, you should update it to the latest version:

deployctl upgrade

Deploying to Deno Deploy

After you've set up Deno Deploy, run:

npm run deploy

Useful resources

How to use FontAwesome in the project

This project uses SVG sprites with FontAwesome icons through a custom <Icon /> component system.

Adding New Icons

1. Search FontAwesome Icons
2. Include the icons in the senarai icon kit. (please ask @zainfathoni to do it for you)
3. Upload the new SVG sprites to the /public/images/ directory
4. Use the <Icon /> component and pass the icon set and id as props

Usage

Component Location: app/components/icon.tsx

import { Icon } from '~/components/icon'

<Icon 
  set="solid"           // "solid" | "light" | "duotone"
  id="chevron-right"    // FontAwesome icon name
  className="h-6 w-6"   // Standard SVG props
/>

Technical Details

• Sprite Files: Located in /public/images/ (solid.svg, light.svg, duotone.svg)
• Implementation: Uses SVG <use> element to reference sprite symbols
• Styling: Icons inherit color via fill="currentColor"
• Performance: All icons in a set load as single HTTP request

Frequently Used Commands

Prisma commands

Learn more about this Prisma schema file in the docs: https://pris.ly/d/prisma-schema

Commands to know:

• npx prisma generate - update TypeScript definitions based on this schema
• npx prisma db push - push the schema changes to the database
• npx prisma studio - open the Studio, which allows you to edit the schema.
• npx prisma migrate reset - reset the migrations to the last version. This will reset the DB and run the seed script
• npx prisma migrate dev --name <descriptive-name> - generate a migration file for any changes you make to the schema (this will be committed).

PlanetScale commands

Learn more about Planetscale CLI in the docs: https://docs.planetscale.com/reference/planetscale-cli

Commands to know:

• pscale connect <DATABASE_NAME> <BRANCH_NAME> --port 3309 - create a secure connection to a database branch for a local client
• pscale database dump <DATABASE_NAME> <BRANCH_NAME> --output prisma/dumps/xx - backup and dump the specified database

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Zain Fathoni 💻 📖 🎨 🚇 🚧 🔧

This project follows the all-contributors specification. Contributions of any kind welcome!