Merge branch 'main' of https://github.com/Deepumandal/react-webpack-configuration

Author: deepumandal

.github/workflows/webpack.yml

@@ -0,0 +1,28 @@
+name: NodeJS with Webpack
+
+on:
+ push:
+ branches: [ "main" ]
+ pull_request:
+ branches: [ "main" ]
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [14.x, 16.x, 18.x]
+
+ steps:
+ - uses: actions/checkout@v3
+
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v3
+ with:
+ node-version: ${{ matrix.node-version }}
+
+ - name: Build
+ run: |
+ npm install
+ npx webpack

README.md

@@ -1,203 +1,29 @@
-# react-webpack-configuration
+# Welcome to the Ultimate React App Creation Guide with Webpack 5! 🚀
 
-This repository provides a basic setup for a React project using webpack.
+Are you ready to embark on an exciting journey into the world of modern web development? 🌐✨ Whether you're a seasoned coder or just taking your first steps, our carefully crafted sample repository is here to be your trusty guide in creating your very own React app using the powerful Webpack 5 compiler and all the necessary packages.
 
-## Installation
+## Why You'll Love This Repository: 🎉
 
-1. Create a new folder:
+- **Step-by-Step Simplicity:** We believe in learning by doing, and that's why we've broken down the process into easy-to-follow steps. No overwhelming tech jargon – just clear instructions!
 
-```bash
- npm install my-project
- cd my-project
-```
+- **Webpack 5 Magic:** Discover the magic of Webpack 5 – the latest and greatest version of the popular bundler. It optimizes your code for performance, so your app loads faster than ever before.
 
+- **React Brilliance:** Dive deep into the world of React – the dynamic JavaScript library that powers some of the most impressive web applications. From components to states, you'll grasp it all.
 
-2. Initialize a new npm project:
-```bash 
- yarn init -y
-```
+- **Package Playground:** Explore the essential packages that make your app come to life! Routing with React Router, styling with CSS Modules, and more – it's like a treasure trove of web development gems.
 
-3. Install the dependencies using yarn or npm
+- **Responsive Design:** Learn how to create apps that look amazing on every device. Mobile, tablet, desktop – your app will shine everywhere!
 
-```bash
- "@babel/core": "^7.22.5",
- "@babel/preset-env": "^7.22.5",
- "@babel/preset-react": "^7.22.5",
- "@babel/preset-typescript": "^7.22.5",
- "@types/react": "^18.2.13",
- "@types/react-dom": "^18.2.6",
- "babel-loader": "^9.1.2",
- "css-loader": "^6.8.1",
- "dotenv": "^16.3.1",
- "html-webpack-plugin": "^5.5.3",
- "process": "^0.11.10",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "style-loader": "^3.3.3",
- "ts-loader": "^9.4.3",
- "typescript": "^5.1.3",
- "webpack": "^5.88.0",
- "webpack-cli": "^5.1.4",
- "webpack-dev-server": "^4.15.1"
-```
+- **Interactive Examples:** Don't just read about it – see it in action! Interactive code examples help you understand concepts better and make learning an enjoyable experience.
 
+- **Community and Support:** Join a community of fellow learners! Got questions? We've got answers. Share your progress, exchange ideas, and feel the energy of collective learning.
 
-4. Generate a TypeScript configuration file:
-```bash
- tsc --init
-```
+## Get Started Today! 🌟
 
+Ready to dive in? Simply clone our repository and follow along with the guided instructions in each section. Before you know it, you'll have a stunning, fully-functional React app under your belt, and a newfound confidence in using Webpack 5.
 
-5. Open the `tsconfig.json` file and uncomment the line 
-```bash
-"jsx": "preserve"
-```
+**Repository Link:** [https://github.com/deepumandal/react-webpack-configuration]
 
-6. Create a new folder named `src` inside the my-project.
+Don't miss this opportunity to level up your web development skills. Whether you're looking to build your portfolio, start a new career, or simply enjoy the art of creating digital experiences, this repository has something exciting for everyone.
 
-7. Create an `index.html` file inside the `src` folder and paste the following code:
-```html
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <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>Document</title>
- </head>
- <body>
- <div id="root"></div>
- </body>
-</html>
-```
-
-8. Create an ```index.css``` file inside the src folder.
-
-9. Create an ```index.tsx``` file inside the src folder and paste the following code:
-```html
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-import "./index.css";
-
-ReactDOM.render(<App />, document.getElementById("root"));
-
-```
-
-10. Create an```App.tsx``` file inside the src folder and paste the following code:
-```html
-import React from 'react'
-
-const App: React.FC = () => {
- return (
- <div>App</div>
- )
-}
-
-export default App
-```
-
-11. Create a webpack.config.js file in the main folder and paste the following code:
-
-```html
-const path = require("path");
-const htmlWebpackPlugin = require("html-webpack-plugin");
-const webpack = require("webpack");
-
-// dotenv configuration settings
-const dotenv = require("dotenv").config({ path: __dirname + "/.env" });
-const isProduction = process.env.NODE_ENV === "production";
-module.exports = {
- resolve: {
- extensions: [".js", ".jsx", ".ts", ".tsx"],
- },
- entry: "./src/index.tsx",
- output: {
- path: path.resolve(__dirname, "dist"),
- },
- plugins: [
- new htmlWebpackPlugin({
- template: "./src/index.html",
- }),
- new webpack.ProvidePlugin({
- process: "process/browser",
- }),
- new webpack.DefinePlugin({
- "process.env": JSON.stringify({
- ...dotenv.parsed,
- NODE_ENV: JSON.stringify(isProduction ? "production" : "development"),
- }),
- }),
- ],
- module: {
- rules: [
- {
- test: /.(js|jsx|ts|tsx)$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader",
- options: {
- presets: [
- "@babel/preset-env",
- "@babel/preset-react",
- "@babel/preset-typescript",
- ],
- },
- },
- },
- {
- test: /\.css$/,
- use: ["style-loader", "css-loader"],
- },
- ],
- },
- devServer: {
- port: 7000,
- open: true,
- hot: true,
- },
-};
-```
-12. modify package.json 
-``` html
-{
- "name": "my-project",
- "version": "1.0.0",
- "main": "index.js",
- "license": "MIT",
- "scripts": {
- "start": "webpack-dev-server --mode development --open --hot",
- "build": "webpack --mode production"
- },
- "dependencies": {
- "@babel/core": "^7.22.5",
- "@babel/preset-env": "^7.22.5",
- "@babel/preset-react": "^7.22.5",
- "@babel/preset-typescript": "^7.22.5",
- "@chakra-ui/react": "^2.7.1",
- "@emotion/styled": "^11.11.0",
- "@types/react": "^18.2.13",
- "@types/react-dom": "^18.2.6",
- "@types/react-router-dom": "^5.3.3",
- "babel-loader": "^9.1.2",
- "css-loader": "^6.8.1",
- "dotenv": "^16.3.1",
- "framer-motion": "^10.12.16",
- "html-webpack-plugin": "^5.5.3",
- "process": "^0.11.10",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "react-router-dom": "^6.13.0",
- "style-loader": "^3.3.3",
- "ts-loader": "^9.4.3",
- "typescript": "^5.1.3",
- "webpack": "^5.88.0",
- "webpack-cli": "^5.1.4",
- "webpack-dev-server": "^4.15.1"
- }
-}
-```
-
-## Authors
-
-- [@deepumandal](https://www.github.com/deepumandal)
+Let's code, innovate, and build the future together! 🖥️🌈