# JS Projects Setup
## Webpack

#### eslint

- `npm init`
- install `eslint` => `npm install eslint -g`
- init configurations for `eslint` => `eslint --init`
- add `"comma-dangle": ["error", "never"]` under `rules` in `.eslint.json` file

#### Webpack

- install webpack => `npm i --save-dev webpack webpack-cli`
- under scripts in `package.json`

"scripts": {
  "build-dev": "webpack -d --watch --mode development",
  "build-prod": "webpack --mode production"
}

#### Dev server
- `npm install webpack-dev-server --save-dev`
- add to scripts

"scripts": {
  "start": "webpack-dev-server"
}

- add to webpack config file

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000
  }

***Now you can run `npm run start` and have live reload***

#### HTML Plugin
- install htmlplugin => `npm i --save-dev html-webpack-plugin`
- add `const HtmlWebpackPlugin = require('html-webpack-plugin');` in top of `webpack.config.js`
- add this under plugins: [...] in `webpack.config.js`

plugins: [
  new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src', 'index.html')
  }),
]

***Now you can put index.html under src folder and it will be generated by wepback under dist***

#### CSS

- install `css-loader && style-loader` => `npm install --save-dev css-loader style-loader`
- include loader in `webpack.config.js` by adding a new rule => `{test: /\.css$/i, use: ['style-loader!css-loader']}`
- import css file `import css from 'file.css';`

***Now you can put css files under src folder, but you need to import these files first, then styles will be generated by wepback under dist (inside js files) to generate the actual css files see next =>***

##### MiniCssExtractPlugin:
- install -> `npm install --save-dev mini-css-extract-plugin`
- add `const MiniCssExtractPlugin = require('mini-css-extract-plugin');` top webpack config
- under plugins in webpack config add:

new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: '[id].css',
  ignoreOrder: false
}),

- add it first to list of css loaders and replace it with `style-loader`:

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
  ]
}

**Sass**
- `npm install sass-loader node-sass --save-dev`
- chain `sass-loader` with `css-loader` and `style-loader` at the **end** and change the regex to `/\.s[ac]ss$/i`
- import `import './style.scss'`
- to make seperate bundle for css files, you need `mini-css-extract-plugin`

**TailwindCSS**
- `npm install tailwindcss postcss-cli autoprefixer`
- install postcss loader => `npm i -D postcss-loader`
- create tailwind config file => `npx tailwind init`
- to generate full config file => `npx tailwind init tailwindcss-config.js --full`
- create `postcss.config.js`
- put this code inside it:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

- add `post-css` loader to css loaders in `webpack.config.js`
- include tailwind classes into your css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

##### Files and images

- install file loader => 'npm i --save-dev file-loader'
- For example `images`:

{
  test: /\.(jpe?g|png|svg|gif)/,
  loader: 'file-loader',
  options: {
    name: 'images/[name].[ext]'
  }
}

- For examle `fonts`:

{
  test: /\.(ttf|woff|otf|gsv)/,
  loader: 'file-loader',
  options: {
    name: 'fonts/[name].[ext]'
  }
}

- install -> `npm install image-webpack-loader --save-dev`
- append the loader with optimizing and compression options:

{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        // optipng.enabled: false will disable optipng
        optipng: {
          enabled: false,
        },
        pngquant: {
          quality: [0.65, 0.90],
          speed: 4
        },
        gifsicle: {
          interlaced: false,
        },
        // the webp option will enable WEBP
        webp: {
          quality: 75
        }
      }
    },
  ],
}

### React

#### Basic Setup
- `yarn add prettier --dev`
- `eslint --init`
- `yarn add eslint-plugin-react --dev`
- add under extends: in eslint.json

  "airbnb",
  "eslint:recommended",
  "plugin:react/recommended"

  "rules": {
      "comma-dangle": ["error", "never"],
      "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }]
  }

- add to package.json

  "prettier": {
    "singleQuote": true,
    "arrowParens": "always"
  },

- 'yarn add prop-types'

#### TailwindCSS

- `yarn add tailwindcss`
- create structure:
- src/
|-- stylesheets/
|-- tailwind/
|-- tailwind.css

- `./node_modules/.bin/tailwind init tailwind.js`
- Add to `src/stylesheets/tailwind.css`:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

- package.json scripts:

  "tailwind:css": "tailwind build src/stylesheets/tailwind/tailwind.css -c tailwind.js -o src/stylesheets/tailwind.css",
  "start": "npm run tailwind:css && react-scripts start",
  "build": "npm run tailwind:css && react-scripts build",

- run the tailwind script
- import it in `index.js` => `import './stylesheets/tailwind.css';`

- to generate full config file => `npx tailwind init tailwindcss-config.js --full`
'''