replaced cra with webpack in dev react project

LiveDuo · Nov 5, 2023 · ee06a48 · ee06a48
1 parent 8419a5c
commit ee06a48
Show file tree

Hide file tree

Showing 7 changed files with 19,673 additions and 40,045 deletions.
diff --git a/dev/react-project/data/default.html b/dev/react-project/data/default.html
@@ -1 +1,31 @@
-<div>hello</div>
+<section class="bg-gray-50">
+  <div class="mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center">
+    <div class="mx-auto max-w-xl text-center">
+      <h1 class="text-3xl font-extrabold sm:text-5xl">
+        Understand User Flow.
+        <strong class="font-extrabold text-red-700 sm:block"> Increase Conversion. </strong>
+      </h1>
+
+      <p class="mt-4 sm:text-xl sm:leading-relaxed">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo tenetur fuga ducimus
+        numquam ea!
+      </p>
+
+      <div class="mt-8 flex flex-wrap justify-center gap-4">
+        <a
+          class="block w-full rounded bg-red-600 px-12 py-3 text-sm font-medium text-white shadow hover:bg-red-700 focus:outline-none focus:ring active:bg-red-500 sm:w-auto cursor-pointer"
+          href="/get-started"
+        >
+          Get Started
+        </a>
+
+        <a
+          class="block w-full rounded px-12 py-3 text-sm font-medium text-red-600 shadow hover:text-red-700 focus:outline-none focus:ring active:text-red-500 sm:w-auto cursor-pointer"
+          href="/about"
+        >
+          Learn More
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/dev/react-project/data/default.json b/dev/react-project/data/default.json
diff --git a/dev/react-project/package.json b/dev/react-project/package.json
@@ -4,30 +4,28 @@
   "private": true,
   "scripts": {
     "start": "http-server ./build -p 3000 --proxy http://localhost:3000/?",
-    "dev": "NODE_OPTIONS=--openssl-legacy-provider destack -d \"react-scripts start\"",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider destack -b \"react-scripts build\""
+    "dev": "destack -d \"webpack-dev-server\"",
+    "build": "destack -b \"webpack\""
   },
   "dependencies": {
+    "crypto-browserify": "^3.12.0",
     "destack": "file:../../lib/",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "4.0.3"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "babel-loader": "^9.1.3",
     "concurrently": "^6.4.0",
+    "css-loader": "^6.8.1",
+    "html-webpack-plugin": "^5.5.3",
     "http-server": "^14.0.0",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "style-loader": "^3.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }
diff --git a/dev/react-project/public/index.html b/dev/react-project/public/index.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React App</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/dev/react-project/src/components/App.js b/dev/react-project/src/components/App.js
@@ -1,3 +1,4 @@
+import React from 'react'
 import { ContentProviderReact } from 'destack'
 
 const App = () => {

diff --git a/dev/react-project/webpack.config.js b/dev/react-project/webpack.config.js
@@ -0,0 +1,44 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  mode: 'development',
+  entry: '/src/index.js', // main js
+  output: {
+    path: path.resolve(__dirname, 'build'), // output folder
+    publicPath: '/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader', // for styles
+        ],
+      },
+    ],
+  },
+  resolve: {
+    fallback: { crypto: false },
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './public/index.html', // base html
+    }),
+  ],
+  devServer: {
+    compress: true,
+    port: 3000,
+  },
+}