- Clone this repository or hit "Use this template" button
git clone [email protected]:pixel-point/remix-starter.git- Install dependencies
npm install- Fill environment variables
cp .env.example .envnpm run devnpm run buildnpm start├── app
│ ├── components
│ │ ├── pages — React components that are being used specifically on a certain page
│ │ └── shared — React components that are being used across the whole website
│ ├── hooks
│ ├── images
│ ├── routes – Remix uses the files in this directory to create the URL routes for your app based on the name of the files
│ ├── styles
│ │ ├── dist – Folder with compiled CSS files
│ │ ├── main.css – Main CSS files where Tailwind imports
│ ├── utils
│ └── root.jsx — Root component for application. You render the <html> element here
├── public – Static assets storage
Read more about Remix project structure
ESLint helps find and fix code style issues and force developers to follow same rules. Current configuration is based on Airbnb style guide.
Additional commands:
npm run lintRun it to check the current status of eslint issues across project.
npm run lint:fixRun it to fix all possible issues.
Prettier helps to format code based on defined rules. Difference between Prettier and ESLint.
Additional commands:
npm run formatRun it to format all files across the project.
Following extensions required to simplify the process of keeping the same code style across the project:
After installation enable "ESLint on save" by adding to your VS Code settings.json the following line:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}You can navigate to settings.json by using Command Pallete (CMD+Shift+P) and then type "Open settings.json".
To enable Prettier go to Preferences -> Settings -> type "Format". Then check that you have esbenp.prettier-vscode as default formatter, and also enable "Format On Save".
Reload VS Code and auto-format will work for you.