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:
What is still missing?
Thank you