react-base-app-nodejs-fullcli-{webpack}

[under optimization] [working fine]

A purist style approach to make a react app from stretch (without creacte-react-app) based on webpack. This way create an auto-updated complete react app from 0 to 100.

---

Open your terminal in a folder and...

• init a nodejs project...
  npm init (or npm init -y)
  

• install react (this version is not ssr)...
  npm i --save react react-dom
  

• install babel (for jsx and compiling)...
  npm i --save-dev @babel/preset-react
  

• install babel add-on (for get resurces)...
  npm i --save-dev babel-loader file-loader style-loader css-loader
  

• in root make .babelrc file with:
  

  {
      "presets": [[ "@babel/preset-react", { "runtime" : "automatic"}]]
  }

  or global profiling with babel.config.json (not raccomended)
  

  {
      "presets": ["@babel/preset-react"],
      "env": {
          "development": {
              "presets": [["@babel/preset-react", { "development": true }]]
      }
  }

  nodejs best and simple way. Insert into package.json:
  

  "babel":{
      "presets": [ [ "@babel/preset-react", { "runtime" : "automatic"}] ]
  },

• install webpack (for editing and build it)
  npm i --save-dev webpack webpack-cli html-webpack-plugin
  

• in root make webpack.config.js confing file:
  

  const HtmlPack = require('html-webpack-plugin')
  const HtmlList = [
      "index",
      "test/secondpage"
  ]
  
  module.exports = {
  
      //https://stackoverflow.com/questions/70916332/webpack-bundle-files-for-multiple-pages
      // entry: { main: [ "./src/index.js", ], test: [ "./src/test/secondpage.js", ], },
  
      entry: HtmlList.reduce( (config, page) => {
          config[page] = `./src/${page}.js`;
          return config;
      },{}),
  
      output: {
          path: __dirname+'/public/reactor',
          filename: '[name].bundle.js',
          clean: true
      },
      devServer: {
          static: __dirname+'/src',
          port: 8080,
          open: true,
          hot: true
      },
      module: {
          rules: [ {
              test: /\.js$/i,
              exclude: /node_modules/,
              use: [ 'babel-loader' ]
          }, {
              test: /\.css$/i,
              exclude: /node_modules/,
              use: [ 'style-loader', 'css-loader' ]
          }, {
              test: /\.(jpe?g|png|gif|webp|svg|ico|zip|json)$/i,
              exclude: /node_modules/,
              loader: 'file-loader',
              options: {
                  name: '[path][name].[ext]'
              }
          } ]
      },
      plugins : [].concat(
          // https://dev.to/marcinwosinek/tutorial-for-building-multipage-website-with-webpack-4gdk
          // https://github.com/jantimon/html-webpack-plugin
          HtmlList.map( page => new HtmlPack({
              filename: `${page}.html`,
          })),
      )
  }

• server:

  • if not have express:
    
    

    1. install a server
       npm i --save-dev http-server and/or npm i --save-dev webpack-dev-server
       

    2. open package.json and change "scripts": {...}, with:
       

       "scripts": {
           "start": "start http://localhost:8080/ && npm run server",
           "server": "http-server -a localhost -p 8080 -c-1",
           "edit": "webpack serve --mode development",
           "build": "webpack --mode production"
       }

    3. test server:
       nb: for view result in server you need to compile app with last step
       with: npm run start for test build in public
       with: npm run serve for edit in src
       
       

  • if you use express:
    
    

    coming soon...

• make a first index:
  
  
  • react dir: mkdir src
    
  • make index.js echo '' > src/index.js
    copy index file content (we suggest see the simple exemple in "src"):
    

    //:
    //: Main of react app project
    //:
    
    // get react
    import React from 'react'
    import ReactDOM from 'react-dom/client'
    
    //make app root
    const root = ReactDOM.createRoot(document.getElementsByTagName('div')[0])
    
    //render app
    root.render(
        <React.StrictMode>
            <h1>HELLO FROM REACT!</h1>
        </React.StrictMode>
    )

• npm run build for make "public" folder and optimized app (ready to online server use)