I'm creating an app from scratch.
package.json
{
"main": "dist/server.js",
"scripts": {
"build:app": "webpack --config ./webpack.app.config.js",
"build:server": "webpack --config ./webpack.server.config.js",
"start": "node ."
},
...
}
yarn build:app builds the React-app into dist/app.js:
webpack.app.config.js
module.exports = {
entry: ['./src/app.tsx'],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist'),
},
}
yarn build:server builds the server, that serves the React-app and provides some additional external API:
webpack.server.config.js
module.exports = {
target: 'node',
entry: './src/server.tsx',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'dist'),
},
}
server.tsx
const app = express()
app.use(express.static(path.resolve('dist')))
app.get('/my-api', (req, res) => {
// ...
})
app.get('*', (req: Request, res: Response) => {
res.set('Content-Type', 'text/html')
res.send(
`<!doctype html>${renderToString(
<html>
<head>
<meta charSet="utf-8" />
<title />
<meta
name="viewport"
content="initial-scale=1.0, maximum-scale=1.0"
/>
</head>
<body>
<div id="root" />
<script src="/app.js" />
</body>
</html>,
)}`,
)
})
app.listen(3050)
yarn start lauches the project.
So...
I need to add HMR here. To be able to re-build app.js on the fly and update the app in realtime.
How can I implement it?
PS: HMR for server.js in not necessary.
PS: Pls don't suggest Next.js :))