I have a simple nodeJS server and I have it set to watch for changes on the code using tsc --watch. What I was wondering is how do I set up express to reload itself when I make changes to the code (note I am asking specifically on Windows)?
I am presuming it is something to do with chokidar in which I have the following index.ts code
import AWS from "aws-sdk";
import express from "express";
import chokidar from "chokidar";
console.log(AWS.S3);
const route = express.Router();
route.get("/signed-url-put-object", async (req, res) => {
console.log(process.env)
});
if (process.env.NODE_ENV !== "production") {
const watcher = chokidar.watch("./index.js");
watcher.on("all", ()=> {
console.log("reloading...");
// what do I do here?
})
}
express().listen(3000, ()=>console.log('listening'))
Try this snippet that I took from this repo.
watcher.on('ready', function() {
watcher.on('all', function() {
console.log("Clearing /server/ module cache from server");
Object.keys(require.cache).forEach(function(id) {
if (/[\/\\]server[\/\\]/.test(id)) delete require.cache[id];
});
});
});
Keep in mind you might run into some issues.
I usually use nodemon and concurrently for my hot reloading needs when both front-end and back-end are in the same repo.
With concurrently and nodemon, I would have something like this.
"scripts": {
"start": "concurrently \"yarn start:fe\" \"yarn start:watch\"",
"start:watch": "nodemon --inspect=5858 ./server/server.ts",
"start:be": "set TS_NODE_PROJECT=./tsconfig.server.json && node --inspect=5858 -r ts-node/register ./server/server.ts",
"start:fe": "react-app-rewired start --scripts-version react-scripts",
}
According to Node's documentation (https://nodejs.org/docs/latest-v12.x/api/esm.html), you can use the .js extension and ES modules if you add "type": "module" to package.json
I'm doing a simple test, my package.json:
{
"type": "module"
}
server.js:
import * as http from 'http';
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Server is OK');
});
server.listen(8000, '127.0.0.1', () => {
console.log('Server listening...');
});
node -v is v12.16.1
Running node server.js with this setup should work. But I must explicitly use --experimental-modules flag... otherwise I get: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:...
What am I missing?
You can use ES modules without --experimental-modules flag only since node 12.17.0 (it was backported from 14.x branch)
In earlier versions you must use the flag.
I have the following server code for a react app (created from create react app):
import config from './../config/config'
import app from './express'
import mongoose from 'mongoose'
// Connection URL
mongoose.Promise = global.Promise
mongoose.connect(config.mongoUri)
mongoose.connection.on('error', () => {
throw new Error(`unable to connect to database: ${mongoUri}`)
})
app.listen(config.port, (err) => {
if (err) {
console.log(err)
}
console.info('Server started on port %s.', config.port)
})
The other server side files uses "Import" as well..
When trying to run it by node server.js I am getting the following error:
(function (exports, require, module, __filename, __dirname) { import config from
'./../config/config'
^^^^^^
SyntaxError: Unexpected token import
How should I start my react app so the client side would run and also this server.js server from the begining ?, I would usually use the following in package.json:
"dev": "concurrently \"npm run react\" \"npm run server\"",
"react": "react-scripts start",
"server": "node src/server/index.js",
But the node command won't work in this case. I tried this with no success:
Using Import In NodeJS server
The problem that you have is because ESM (import/export) was introduced to Node in version 12. You have two options: if you are using node v12 or higher you can follow this link.
If you are using a lower version of node you'll have to use babel to transpile your code. Check this link.
I am trying to add newrelic agent to my nuxt application. I have installed the needed package and added my license key and set an application name in newrelic.js configuration file:
npm i newrelic
cp node_modules/newrelic/newrelic.js .
nano newrelic.js
My problem is that I also need to require this configuration file at the top of my server.js file and since this file is dynamically created and placed under the .nuxt folder I have no idea how to do this.
In a standard nodejs application I would simply add the require('newrelic'); to the top of my startup script or perhaps add a new script entry in package.json looking something like this:
"scripts": {
"dev": "node -r newrelic.js app.js"
}
I ended up using express to solve this:
npm i express
touch server/index.js
We will now load newrelic in the server/index.js file and after that create our nuxt instance:
require('newrelic');
const express = require('express');
const consola = require('consola');
const { Nuxt, Builder } = require('nuxt');
const app = express();
// Import and Set Nuxt.js options
const config = require('../nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';
async function start () {
// Init Nuxt.js
const nuxt = new Nuxt(config);
const { host, port } = nuxt.options.server;
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt);
await builder.build();
} else {
await nuxt.ready();
}
// Give nuxt middleware to express
app.use(nuxt.render);
// Listen the server
app.listen(port, host);
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
});
}
start();
I also updated the script section in my package.json:
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js"
}
Hope this can help anyone who faces the same kind of problem.
For anyone struggling with this I found a much simpler solution by using Nuxt modules and hooks.
Create a new file modules/newRelic.js with the following content:
module.exports = function () {
this.nuxt.hook("listen", () => {
require("newrelic");
});
};
Import the module in nuxt.config.js
modules: [
"~/modules/newRelic.js"
]
Don't forget to install newrelic (npm i newrelic) and paste newrelic.js into the applications root folder.
In Node.js, you can require a module with the -r [module] syntax (see Node.js docs) before your actual script starts up.
For Nuxt, alter your npm run scripts like this (instead nuxt start):
node -r newrelic node_modules/nuxt/bin/nuxt.js start
This way, Node loads NewRelic first, then Nuxt, and ensures NewRelic is able to instrument all dependencies. If you let Nuxt bootup first, NewRelic is not aware of some dependencies, e.g. express.
This is recommended by NewRelic, see their docs.
I'm using webpack to run my react frontend successfully using the following config:
{
name: 'client',
entry: './scripts/main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query:{
presets: ['es2015', 'react', 'stage-2']
}
}
]
}
}
I'm trying to put up a node.js express backend as well, and would like to run that through webpack as well, so that I have a single server running both the backend and frontend, and because I want to use babel to transpile my javascript.
I made a quick testserver looking like this:
var express = require('express');
console.log('test');
var app = express();
app.get('/', function(req, res){
res.send("Hello world from Express!!");
});
app.listen(3000, function(){
console.log('Example app listening on port 3000');
});
If I run this with node index.js and open my browser on localhost:3000 it prints "Hello world from Express!!". So far so good. Then I tried creating a web-pack config for it:
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = [
{
name: 'server',
target: 'node',
entry: './index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
externals: nodeModules,
module: {
loaders: [
{
test: /\.js$/,
loaders: [
'babel-loader'
]
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
}
When I run the command webpack-dev-server it starts up successfully (it seems). However, if I go to my browser on localhost:3000 now, it just says that the webpage is not available, just as when the server is not running at all.
I'm very new to both node and webpack, so either I have made a small mistake somewhere, or I'm way off ;)
Webpack-dev-server is great for client side development but it will not deploy Express api's or middleware. So in development I recommend running two separate servers: One for the client and one for your server side api's.
Nodemon npm install --save-dev nodemon is a good backend development server that will give you hot-redeploy of your api's, or you can just use express and restart when you make changes. In production the client and api will still be served by the same express server.
Set a lifecycle event for both nodemon and webpack-dev-server in your package.json to make starting them easy (example: npm run dev-server).
"scripts": {
"start": "webpack --progress --colors",
"dev-server": "nodemon ./server.js localhost 8080",
"dev-client": "webpack-dev-server --port 3000",
}
Or, to run express directly from node:
"scripts": {
"start": "webpack --progress --colors",
"dev-server": "node dev-server.js",
"dev-client": "webpack-dev-server --port 3000",
}
// dev-server.js
const express = require('express');
const app = express();
// Import routes
require('./_routes')(app); // <-- or whatever you do to include your API endpoints and middleware
app.set('port', 8080);
app.listen(app.get('port'), function() {
console.log('Node App Started');
});
Note: The api server must use a different port than webpack-dev-server.
And finally in your webpack-dev-config you need to use a proxy to redirect calls to your api to the new port:
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
host: 'localhost', // Defaults to `localhost`
port: 3000, // Defaults to 8080
proxy: {
'^/api/*': {
target: 'http://localhost:8080/api/',
secure: false
}
}
},
// and separately, in your plugins section
plugins: [
new webpack.HotModuleReplacementPlugin({
multiStep: true
})
]
**Bonus points for having a single script to start and kill both
Since webpack-dev-server is just a tiny express server with compile on change and hot reload.
So, if you already got a express server for backend API, just merge the compile on change and hot reload into your express server.
Then after take a look at the package.json of webpack-dev-server, i find the key is just
webpack-dev-middleware
const express = require('express'); //your original BE server
const app = express();
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware'); //webpack hot reloading middleware
const compiler = webpack({ .. webpack options .. }); //move your `devServer` config from `webpack.config.js`
app.use(middleware(compiler, {
// webpack-dev-middleware options
}));
app.listen(3000, () => console.log('Example app listening on port 3000!'))
So, when you run your BE server, it will compile all the things using webpack, and watch for changes, LOL ~
Also, add webpack-hot-middleware for hot reloading function, see Hot Module Replacement
From your questions here and here, it appears that you are using ReactJS with ES6. I faced the exact same issue, and here is how I tackled it -
Have multiple entry points for your application
In particular you can put all your vendor files like JQuery, React etc into one chunk. This way, your vendor files will remain the same even when you modify your souce files. You can add this line to your webpack config
entry: {
vendors: ['react','reactDom','jquery'] //Any other libraries
}
Use the CommonsChunkPlugin to have webpack determine what code/modules you use the most, and put it in a separate bundle to be used anywhere in your application.
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'dist/js/vendors.js', Infinity),
]
Use React Hot Loader
Run npm install react-hot-loader --save-dev. Make sure you have installed webpack-dev-server first.
Then you need to change your loaders to this -
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot'],
include: path.join(__dirname, 'public')
},{
loader: 'babel',
query: {
presets: ['react', 'es2015']
},
include: path.join(__dirname, 'public')
},
]
Make sure React Hot Loader comes before Babel in the loaders array. Also make sure you have include: path.join(__dirname, 'public') to avoid processing node_modules, or you may get an error like this -
Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined
Modifications to your script tags in your index.html page
If your html has something like this -
<script src="/dist/js/vendors.js"></script>
<script src="/dist/js/app.bundle.js"></script>
Change this to point to your webpack-dev-server proxy -
<script src="http://localhost:8080/dist/js/vendors.js"></script>
<script src="http://localhost:8080/dist/js/app.bundle.js"></script>
Run webpack-dev-server --hot --inline,
wait for the bundling to finish, then hit http://localhost:3000 (your express server port) in your browser.
If you run into any errors, you could find this troubleshooting guide very useful.
Hope this helps, and you can take a look at the webpack setup for my project here
Just faced the same issue and came with another solution (found out more information about it later, but here it is).
Instead of using the webpack-dev-server, use the webpack --watch command so files are compiled again upon changes. Once the files are updated on the dist (or any other compiled files folder) you can set to run the nodemon on the dist folder and watch only the dist files.
This way it is possible to have the express server running and serving the front-end as you would in a production environment (or kinda) and benefit from the fast reloads.
Here's a link with some solutions to combine the webpack watch and nodemon.
My scripts section is something like this at this moment (I'm using the run-all solution):
"scripts": {
"serve": "npm-run-all --parallel serve:webpack serve:nodemon",
"serve:webpack": "webpack --progress --colors --watch",
"serve:nodemon": "nodemon ./dist/app.js --watch dist"
},
I found this to be a really simple solution that works with create-react-app, where you just want to use npm start to start the webpack-dev-server and you can't mess around with the webpack config. Just use http-proxy-middleware in Express to proxy all requests that the server doesn't itself handle to the webpack-dev-server:
import express from "express"
import { createProxyMiddleware } from "http-proxy-middleware"
const app = express()
// Put your web APIs here, for example:
app.get("/hello", (req, res) => {
res.send("Hello World")
})
...
// This goes after all your other routes:
if (!isProduction) {
app.use("*", createProxyMiddleware({ target: "http://127.0.0.1:3000", ws: true }))
}
app.listen(5000)
Note 1: To keep this simple, I am not using HTTPS. (Use environment variable HTTPS=false to have webpack-dev-server use HTTP.)
Note 2: You only want to create the proxy in development mode - in production, you would probably use express.static to serve your compiled single-page app.
Run npm start on your React project and start your Express server. Then (using the port numbers in the example code) browse to http://localhost:5000. You will see your React front-end and it will be able to send API requests to your Express server, all on port 5000. Hot module replacement works too!
quick answer: webpack-dev-server has an express built in, just use onAfterSetupMiddleware or onBeforeSetupMiddleware to get the app instance
module.exports = {
//...
devServer: {
onBeforeSetupMiddleware: function (devServer) {
if (!devServer) {
throw new Error('webpack-dev-server is not defined');
}
// **devServer.app is an express**
devServer.app.get('/some/path', function (req, res) {
res.json({ custom: 'response' });
});
},
},
};
tl;dr
there are some ways to make it work, the one above is what I love most, let's have a look at other work arounds
1.proxy: config webpack dev server with proxy
this way you need an extra process for backend only, that means an extra step to start and stop your service, still it's a good enough solution, simple and works
2.webpack-dev-middleware: a middleware for express
lack both documentation and maintainess, I was using it and made it work, but when some package updates it fails to work