💿
Remix Fundamentals
Build Better websites with Remix
Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. Get a jumpstart on Remix with this workshop.
Prerequisites
System Requirements
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
If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.
Setup
Follow these steps to get this set up:
git clone https://github.com/FrontendMasters/remix-fundamentals.git
cd remix-fundamentals
npm run setup
If you experience errors here, please open an issue with as many details as you can offer.
Exercises
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 final and exercises directories is a Remix app. The easiest way to run these without having to cd into each directory is to use the 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.
Instructions
For each exercise, follow the instructions in the README.md file of the exercise directory to learn what the objectives are.
You can us 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 (like when we're getting the database ready for auth), 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.
Workshop Feedback
Each exercise has an Elaboration and Feedback link. Please fill that out after the exercise and instruction.
At the end of the workshop, please go to this URL to give overall feedback. Thank you! https://kcd.im/rmx-workshop-ws-feedback
12 Nov 15, 2022
42 Nov 23, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
9 Oct 29, 2022
2 Oct 13, 2022
2 Oct 11, 2022
3 Feb 10, 2022
7 Oct 27, 2022
26 Dec 17, 2022
122 Jan 6, 2023
30 Oct 5, 2022
9 Dec 29, 2022
5.8k Jan 2, 2023
45 Dec 9, 2022
65 Jan 1, 2023
3.7k Dec 20, 2022
25 Nov 1, 2022