💿 Remix Workshop
Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll explore the core patterns in Remix that enable this, as well as some of its more advanced features.
All of these must be available in your
PATH. To verify things are set up
properly, you can run this:
git --version node --version npm --version
Follow these steps to get this set up:
git clone https://github.com/remix-run/jamstack-conf-workshop.git cd jamstack-conf-workshop npm run setup
If you experience errors here, please open an issue with as many details as you can offer.
You'll find all the exercises in the
exercises directory. The finished version
of each exercise is in the
final directory. Each directory is a completely
contained Remix app.
The purpose of the exercise is not for you to work through all the material. It's intended to get your brain thinking about the right questions to ask me as I walk through the material.
Running each app
Each directory in the
exercises directories is a Remix app. The
easiest way to run these without having to
cd into each directory is to use
dev.js script in the root of this repository:
# to run the first exercise app: node dev exercise/01 # This runs the first exercise too: node dev 1 # or to run the final version of the 2nd exercise node dev final/02 # this runs the 1st extra credit of the final version of the 2nd exercise node dev final2.1 # this will just ask you which one you want to run node dev
Each will run on a unique port so you can run multiple apps at once.
Unfortunately, due to the nature of this workshop, ⌘ + P isn't very useful (because there are a LOT of duplicate files). If you'd prefer, you can open each exercise in its own editor. Or just make sure to prefix your searches with "exercise/03" (for example) so you're searching in the right app.
You can use the
diff.js script to be shown the differences between what's in
any of the apps. For example:
# to be shown the differences between the first exercise and the final version: node diff exercise/01 final/01 # We've got some sensible defaults in place so you can get the same diff as above with: node diff 1 # And for comparing yourself to extra credits, you can run: node diff exercise/02 final/02.2 # this will just ask you which ones you want to diff node diff
This can be handy for you to run when you think you're done but things aren't quite working as you expect.
Sometimes there are changes that happen outside of the tutorial because they're unrelated to Remix but they can be handy to know about, so the diff command can help with that:
# To be shown the changes that happened to prepare for the exercise: node diff final/04 exercise/05
NOTE: Unfortunately, there's no way to exclude some files from the diff
we're doing, so we limit the diff to only the
app directory (where almost all
of your code changes happen). You'll need to ignore any changes to
styles/tailwind.css however. That's a generated file. Sorry about that.