Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mayank99/remix-djent-stack
Remix stack with basic postcss-preset-env, code formatting, linting etc
https://github.com/mayank99/remix-djent-stack
netlify postcss remix-stack
Last synced: about 2 months ago
JSON representation
Remix stack with basic postcss-preset-env, code formatting, linting etc
- Host: GitHub
- URL: https://github.com/mayank99/remix-djent-stack
- Owner: mayank99
- Created: 2022-03-18T18:31:26.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-18T00:16:20.000Z (over 2 years ago)
- Last Synced: 2024-08-04T01:12:28.011Z (5 months ago)
- Topics: netlify, postcss, remix-stack
- Language: JavaScript
- Homepage:
- Size: 209 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-remix - Welcome to the Remix Djent Stack
- awesome-remix - Welcome to the Remix Djent Stack
README
# 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:
```diff
- import styles from './index.css';
+ import styles from './index.min.css';
```
## Development
Make sure you have the [Netlify CLI](https://www.netlify.com/products/cli/) installed globally (`npm i -g netlify-cli`), then run the following command.
```sh
npm run dev
```
It starts your app in development mode, rebuilding on file changes. Open up [http://localhost:3000](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:
```sh
$ npm run build
# preview deployment
$ netlify deploy
# production deployment
$ netlify deploy --prod
```