Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
universal-hot-reload
Advanced tools
Readme
Easily hot reload your server, client or universal apps :clap:
Why this package?
This should be used in development only!
yarn add universal-hot-reload -D
To hot reload graphql servers and express servers without ssr,
create index.js and server.js like below. For graphql, only express-graphql
and apollo-server
are supported for now.
const { serverHotReload } = require('universal-hot-reload');
// server.js is where you export your http.server instance (see below)
serverHotReload(require.resolve('./server.js'));
// You'll need to export default an instance of http.server so universal-hot-reload
// can restart your server when changes are detected.
// For express or express-graphql
export default app.listen(PORT, () => console.log(`Listening at ${PORT}`));
// For apollo-server
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(() => console.log(`Listening at ${PORT}`));
export default server.httpServer;
Run your app:
node index.js
To hot reload a universal app, create index.js like below and follow the same steps as Quickstart: server only.
const UniversalHotReload = require('universal-hot-reload').default;
// supply your own webpack configs
const serverConfig = require('../webpack.config.server.js');
const clientConfig = require('../webpack.config.client.js');
// the configs are optional, you can supply either one or both.
// if you omit say the server config, then your server won't hot reload.
UniversalHotReload({ serverConfig, clientConfig });
If you use the serverHotReload
function then you won't need to supply your own server webpack config. universal-hot-reload
uses a default server webpack config so you don't have to supply your own.
If you want to use your own custom server webpack config or if you want to hot reload your universal app,
then you'll need to supply your own webpack configs. Follow the lines marked Important
.
Your server webpack config should look like this:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './src/server/server.js',
target: 'node', // Important
externals: [nodeExternals()], // Important
output: {
path: path.resolve('dist'),
filename: 'serverBundle.js',
libraryTarget: 'commonjs2' // Important
},
// other webpack config
};
Your client webpack config should look like this:
const path = require('path');
const webpackServeUrl = 'http://localhost:3002';
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: './src/client/index',
output: {
path: path.resolve('dist'),
publicPath: `${webpackServeUrl}/dist/`, // Important: must be full path with trailing slash
filename: 'bundle.js'
},
// other webpack config
};
Create an index.js
file:
const UniversalHotReload = require('universal-hot-reload').default;
// You can provide only a server or a client config or both.
const serverConfig = require('../webpack.config.server.js');
const clientConfig = require('../webpack.config.client.js');
// Omitting a config means that side of your app won't hot reload.
UniversalHotReload({ serverConfig, clientConfig });
Lastly in your server entry file:
import { getDevServerBundleUrl } from 'universal-hot-reload';
import webpackClientConfig from 'path/to/webpack.config.client';
// Important: gets webpack-dev-server url from your client config
const devServerBundleUrl = getDevServerBundleUrl(webpackClientConfig);
// Important: feed the url into script src
const html = `<!DOCTYPE html>
<html>
<body>
<div id="reactDiv">${reactString}</div>
<script src="${devServerBundleUrl}"></script>
</body>
</html>`;
// Important: the listen method returns a http.server object which must be default exported
// so universal-hot-reload can access it
export default app.listen(PORT, () => {
log.info(`Listening at ${PORT}`);
});
Run your app!
node index.js
For graphql, check this example with nexus,
apollo server and typescript. Only express-graphql
and apollo-server
are supported right now. graphql-yoga
does not expose its http.server
instance and so it's not hot-reloadable this way for now.
For universal webpack apps, check the react example for a fully working spa with react and react-router.
FAQs
Hot reload client and server webpack bundles for the ultimate development experience
The npm package universal-hot-reload receives a total of 141 weekly downloads. As such, universal-hot-reload popularity was classified as not popular.
We found that universal-hot-reload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.