Welcome to the Remix Djent Stack

What is this?

This is a lightweight Remix template Stack which adds the following things on top of the default netlify + TS template:

• PostCSS-preset-env with nesting support
• Watch script for auto-compiling CSS on file changes.
• Code formatting with prettier
• Basic CSS resets
• Experimental file nesting in vscode
• All configs tucked away in package.json
• Normalized LF endings for git and vscode
• (More to be added in the future!)

CSS convention

Write your CSS with all the fancy future syntax in your -.css file that's colocated in the same folder as your route file. Then, instead of importing the styles as you normally would, just import them from the -.min.css file which gets generated by postcss. This file will be folded out of view by vscode and gitignored.

e.g. for an index.css file, your import should look like this:

- import styles from './index.css';
+ import styles from './index.min.css';

Development

Make sure you have the Netlify CLI installed globally (npm i -g netlify-cli), then run the following command.

npm run dev

It starts your app in development mode, rebuilding on file changes. Open up http://localhost:3000, and you should be ready to go!

Deployment

There are two ways to deploy your app to Netlify, you can either link your app to your git repo and have it auto deploy changes to Netlify, or you can deploy your app manually. If you've followed the Netlify setup instructions, all you need to do is run this:

$ npm run build
# preview deployment
$ netlify deploy

# production deployment
$ netlify deploy --prod