DEV Community 👩‍💻👨‍💻

ynwd
ynwd

Posted on

How to setup react, tailwind, webpack and typescript in a monorepo

Previously, we have created configuration for react, tailwind, webpack in monorepo using npm workspaces.

Now we will use typescript.

.
├── babel.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── Button.tsx
│   ├── Header.tsx
│   ├── index.css
│   └── index.ts
├── tailwind.config.js
├── tsconfig.json
└── webpack.config.js
Enter fullscreen mode Exit fullscreen mode

Clone previous repo: https://github.com/ynwd/monorepo/tree/tailwind

install all typescript-react related packages

npm i typescript ts-loader @types/react-dom @types/react @babel/preset-typescript -D
Enter fullscreen mode Exit fullscreen mode
npx tsc --init
Enter fullscreen mode Exit fullscreen mode

update ts config

{
  "compilerOptions": {
    "target": "es5",
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Enter fullscreen mode Exit fullscreen mode

update babel config

module.exports = {
    presets: [
        "@babel/preset-react",
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
};
Enter fullscreen mode Exit fullscreen mode

update webpack config

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== "production"

module.exports = {
    mode: devMode ? "development" : "production",
    entry: {
        index: { import: "./src/index.ts" }
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                loader: "ts-loader",
            },
            {
                test: /\.css$/i,
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                    'css-loader',
                    "postcss-loader",
                ],
            },
        ],
    },
    output: {
        filename: "components.bundle.min.js",
        library: 'fstrComponents',
        libraryTarget: 'umd',
        clean: true
    },
    plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
}
Enter fullscreen mode Exit fullscreen mode

update tailwind config

module.exports = {
  purge: [
    './src/**/*.tsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Enter fullscreen mode Exit fullscreen mode

rename component extension

  • Button.js to Button.tsx
  • Header.js to Header.tsx
  • index.js to index.ts

compile

npm run build -w @fstr/component
Enter fullscreen mode Exit fullscreen mode

Final source code: https://github.com/ynwd/monorepo/tree/typescript

Top comments (0)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.