Welcome to Remix!
This is a starter repo as an example to configure the project with:
- TypeScript
- Prettier
- Jest
- Jest-DOM
- React-Testing-Library
- React-Testing-Library User-Event
- ESLint
- ESLint Plugin: Testing-Library
- ESLint Plugin: Jest-DOM
- Alias-HQ.
- Internally served font example.
- Error boundaries for the root and a main route example.
- SEO with Meta tags.
- Misc. structural best practices.
- Misc. quality of life and minor opinions.
If you know the target server (Netlify or Vercel for example), then see DIY.
Remember to update after cloning
yarn upgrade-interactive --latest
Development
From your terminal:
Start development server
yarn dev
Lint files
yarn lint
Format files
yarn format
Test
Remix uses ESbuild and this project makes use jest.config as a module hence the *.msj file extension. File path aliases are generated via ts.config using a library called alias-hq.
yarn test
To run alias-hq after updating the project structure for your purposes:
yarn alias-hq
This starts your app in development mode, rebuilding assets on file changes.
Deployment
First, build your app for production:
yarn build
Then run the app in production mode:
yarn start
Now you'll need to pick a host to deploy it to.
DIY
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of remix build
build/public/build/
Using a Template
When you ran npx create-remix@latest there were a few choices for hosting. You can run that again to create a new project, then copy over your app/ folder to the new project that's pre-configured for your target server.
cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app
# copy over the packet.json and
yarn install
Additional / TODO
- SASS/SCSS: It is possible to setup SASS/SCSS with this project, however with CSS variables and other modern APIs, vanilla CSS is usually enough. Reference Best practices & Setting up SASS with Remix
- Optimistic UI. Remix can help you build optimistic UI with useTransition and useFetcher.
- SEO (sitemap). At the time of writing this, there is no native Remix method of generating a sitemap. There is ongoing discussion and potential options for current use here.
1 Nov 3, 2021
491 Dec 5, 2022
16 Dec 29, 2022
208 Jan 2, 2023
14 Oct 2, 2022
2 May 3, 2022
23 Dec 1, 2022
119 Dec 30, 2022
38 Dec 19, 2022
3 Jan 19, 2022
67 Jan 3, 2023
5 Jul 28, 2022
2 Nov 14, 2022
20 Oct 27, 2022
4 Jul 26, 2022
81 Dec 24, 2022
2 Oct 22, 2022
3 Apr 12, 2022