I am currently rendering a webpack build file (bundle.js) through a Go server. How can I make my build files hot reload, or what do I need to do in order to serve hot reload files from the Go server?
When I use the 'npm run start' script, I am told that the webpack output is served from http://localhost:3000/dist/
and the project output is from http://localhost:3000
My directory is as follows
+ public
- bundle.js
+ src
- App.js
- index.js
- index.html
- package.json
- server.go
- webpack.config.js
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Starter</title>
</head>
<body>
<div id="root"></div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<script src="/public/bundle.js"></script>
</body>
</html>
// webpack config
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["@babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.join(__dirname, "/public"),
publicPath: "/public/",
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
hotOnly: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
// package.json
{
"name": "r-proj",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development",
"build": "webpack --mode development",
"a": "webpack-dev-server --content-base src --hot --inline"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.1.0",
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^1.0.0",
"style-loader": "^0.23.0",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.8"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
}
}
// server.go
func handler(w http.ResponseWriter, r *http.Request) {
t, _ := template.ParseFiles("./index.html")
t.Execute(w, "")
}
func main() {
http.HandleFunc("/", handler)
fs := http.FileServer(http.Dir("./public/"))
http.Handle("/public/", http.StripPrefix("/public", fs))
log.Fatal(http.ListenAndServe(":8080", nil))
}
Thank you.
