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:
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:
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)!
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:
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!).
remix-stack
tag to your repo!
--template
The template option can be any of the following values:
blues-stack
)mcansh/snkrs
)/my/remix-stack
)/my/remix-stack.tar.gz
)https://example.com/remix-stack.tar.gz
)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:
npx create-remix@latest --template your-private/repo --token yourtoken
The token just needs repo
access.
If you set any dependencies in package.json to *
, the Remix CLI will change it to a semver caret of the installed Remix version:
- "remix": "*",
+ "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.
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.
remix init
.
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.