Remix Stacks

Remix Stacks is a feature of the Remix CLI that allows you to generate a Remix project quickly and easily. There are several built-in and official stacks that are full-blown applications. You can also make your own (read more below).

Read the feature announcement blog post and watch Remix Stacks videos on YouTube.

The built-in official stacks come ready with common things you need for a production application including:

  • Database
  • Automatic deployment pipelines
  • Authentication
  • Testing
  • Linting/Formatting/TypeScript

What you’re left with is everything completely set up for you to just get to work building whatever amazing web experience you want to build with Remix. Here are the built-in official stacks:

  • The Blues Stack: Deployed to the edge (distributed) with a long-running Node.js server and PostgreSQL database. Intended for large and fast production-grade applications serving millions of users.
  • The Indie Stack: Deployed to a long-running Node.js server with a persistent SQLite database. This stack is great for websites with dynamic data that you control (blogs, marketing, content sites). It’s also a perfect, low-complexity bootstrap for MVPs, prototypes, and proof-of-concepts that can later be updated to the Blues stack easily.
  • The Grunge Stack: Deployed to a serverless function running Node.js with DynamoDB for persistence. Intended for folks who want to deploy a production-grade application on AWS infrastructure serving millions of users.

Yes, these are named after music genres. 🤘 Rock on.

There will be more stacks available in the future. And you can make your own (and we strongly encourage it)!

Custom Stacks

The Remix CLI will help you get started with one of these built-in stacks, but if you want, you can create your own stack and the Remix CLI will help you get started with that stack. There are several ways to do this, but the most straightforward is to create a GitHub repo:

  1. npx create-remix@latest --template my-username/my-repo

Custom stacks give an enormous amount of power and flexibility, and we hope you create your own that suits the preferences of you and your organization (feel free to fork ours!).

Yes, we do recommend that you name your own stack after a music sub-genre (not “rock” but “indie”!). In the future, we will have a page where you can list your open-source stacks for others to learn and discover. For now, please add the remix-stack tag to your repo!

--template

The template option can be any of the following values:

  • The name of a stack in the remix-run GH org (e.g. blues-stack)
  • A GH username/repo combo (e.g. mcansh/snkrs)
  • A file path to a directory on disk (e.g. /my/remix-stack)
  • A path to a tarball on disk (e.g. /my/remix-stack.tar.gz)
  • A URL to a tarball (e.g. https://example.com/remix-stack.tar.gz)
  • A file URL (e.g. file:///Users/michael/remix-stack.tar.gz)

Additionally, if your stack is in a private GitHub repo, you can pass a GitHub token via the --token cli flag:

  1. npx create-remix@latest --template your-private/repo --token yourtoken

The token just needs repo access.

Custom Template Tips

Dependency versions

If you set any dependencies in package.json to *, the Remix CLI will change it to a semver caret of the installed Remix version:

  1. -   "remix": "*",
  2. +   "remix": "^1.2.3",

This allows you to not have to regularly update your template to the latest version of that specific package. Of course, you do not have to put * if you’d prefer to manually manage the version for that package.

Customize Initialization

If the template has a remix.init/index.js file at the root then that file will be executed after the project has been generated and dependencies have been installed. This gives you a chance to do anything you’d like as part of the initialization of your template. For example, in the blues stack, the app property has to be globally unique, so we use the remix.init/index.js file to change it to the name of the directory that was created for the project + a couple random characters.

You could even use remix.init/index.js to ask further questions to the developer for additional configuration (using something like inquirer). Sometimes, you’ll need dependencies installed to do this, but those deps are only useful during initialization. In that case, you can also create a remix.init/package.json with dependencies and the Remix CLI will install those before running your script.

After the init script has been run, the remix.init folder gets deleted, so you don’t need to worry about it cluttering up the finished codebase.

Do note however, that opting out of installing dependencies will not run the remix.init setup, to do so manually, run remix init.

Remove TypeScript

If there’s a tsconfig.json file in the root of the project, the Remix CLI will ask whether the user wants the TypeScript automatically removed from the template. We don’t recommend this, but some folks just really want to write regular JavaScript.