chore: tailwindcss and react

4 years ago · b4a356e730
parent b41556ef96
commit b4a356e730
9 changed files with 2444 additions and 24 deletions
--- a/web/assets/template.html
+++ b/web/assets/template.html
@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
--- a/web/package.json
+++ b/web/package.json
@ -10,12 +10,24 @@
    "build": "webpack"
  },
  "dependencies": {
-    "socket.io-client": "^4.1.2"
+    "linaria": "^3.0.0-beta.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "socket.io-client": "^4.1.2",
+    "tailwindcss": "^2.2.4"
  },
  "devDependencies": {
    "@types/node": "^15.12.5",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.8",
    "@types/webpack": "^5.28.0",
+    "autoprefixer": "^10.2.6",
+    "css-loader": "^5.2.6",
    "esbuild-loader": "^2.13.1",
+    "html-webpack-plugin": "^5.3.2",
+    "postcss": "^8.3.5",
+    "postcss-loader": "^6.1.0",
+    "style-loader": "^3.0.0",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.4",
    "webpack": "^5.41.0",
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    'tailwindcss',
+    'autoprefixer',
+  ]
+}
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@ -0,0 +1,5 @@
+import React from 'react';
+
+export const App: React.FC = React.memo(() => {
+  return <div className="m-4">Hello World</div>;
+});
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@ -1 +1,7 @@
-console.log('Hello World');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './App';
+
+import 'tailwindcss/tailwind.css';
+
+ReactDOM.render(React.createElement(App), document.querySelector('#app'));
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -0,0 +1,11 @@
+// tailwind.config.js
+// Reference: https://www.tailwindcss.cn/docs/configuration
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@ -3,7 +3,9 @@
    "target": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
+    "isolatedModules": true,
    "lib": ["DOM"],
+    "jsx": "react",
    "typeRoots": ["./node_modules/@types", "./types"]
  }
 }
--- a/web/webpack.config.ts
+++ b/web/webpack.config.ts
@ -4,6 +4,7 @@

 import { Configuration } from 'webpack';
 import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';

 const ROOT_PATH = path.resolve(__dirname, './');
 const DIST_PATH = path.resolve(ROOT_PATH, './dist');
@ -22,14 +23,41 @@ const config: Configuration = {
    rules: [
      {
        test: /\.tsx?$/,
-        use: 'esbuild-loader',
        exclude: /node_modules/,
+        loader: 'esbuild-loader',
+        options: {
+          loader: 'tsx',
+          target: 'es2015',
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                config: path.resolve(ROOT_PATH, 'postcss.config.js'),
+              },
+            },
+          },
+        ],
      },
    ],
  },
  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
+    extensions: ['.tsx', '.ts', '.js', '.css'],
  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'PawChat',
+      inject: true,
+      hash: true,
+      template: path.resolve(ROOT_PATH, './assets/template.html'),
+    }),
+  ],
 };

 export default config;
--- a/yarn.lock
+++ b/yarn.lock