1

I was following this two tutorials to create my first react app and node.js:

Doc Microsoft(The worst doc in MS I have ever seen) Medium.com This one helped me to build a working site.

I am using visual studio 2019 (not an optional.. so please no VS Code) and to run my application I run the command: npx webpack It generates the dist folder and the "executable" js. Then I run the project via the "debug" butto in visual studio.

But now I would like to build and run my site as explained in the Micorsoft documentation. The secret seems to be ind the package.json file and webpack-config.js file.

In the first file we find:

"scripts": {
  "clean": "",
  "build": "webpack-cli ./src/app.tsx --config webpack-config.js"
}

In the second the configuration.

The "only" one difference between my projct and the MS Doc is that the doc uses Typescript.

Here my Project:

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    watch: false,
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: './app.js'
        ,
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

package.json

  {
    "name": "my.web.react",
    "version": "0.0.0",
    "description": "My.Web.React",
    "main": "server.js",
    "author": {
      "name": ""
    },
    "dependencies": {
      "@babel/core": "^7.15.0",
      "@babel/preset-react": "^7.14.5",
      "babel-loader": "^8.2.2",
      "express": "^4.17.1",
      "html-webpack-plugin": "^5.3.2",
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "webpack": "^5.49.0",
      "webpack-cli": "^4.7.2"
    },
    "scripts": {
      "clean": "",
      "build": "webpack-cli ./src/index.jsx --config webpack.config.js"
    }
  }

babel.config.json

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

Now when I click on Rebuild, nothing happens: enter image description here

What is still missing?

Thank you

Simone
  • 2,304
  • 6
  • 30
  • 79

0 Answers0