A React SSR toolbelt for your everyday life
yarn add @poool/spruce @poool/spruce-dom @poool/spruce-webpack-configIf you don't want to install the peerDependencies by hand, you can install them using install-peerdeps:
npx install-peerdeps @poool/spruce -Y
npx install-peerdeps @poool/spruce-dom -Y
npx install-peerdeps @poool/spruce-webpack-config -Y --dev* -Y stands for yarn, omit it if you need to use npm
Because React server-side rendering can be a real pain in the ass, we tried to do it the easiest way we could come up with.
The minimum possible usage consists of an app:
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>
<h1>Hello world, this is a demo!</h1>
</div>
);
if (typeof document !== 'undefined') {
const appContainer = document.getElementById('app');
if (appContainer.innerHTML) {
ReactDOM.hydrate(<App />, document.getElementById('app'));
} else {
ReactDOM.render(<App />, document.getElementById('app'));
}
}
export default App;<!-- index.ejs -->
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<title><%= typeof spruce !== 'undefined' ? spruce.title : '' %></title>
</head>
<body>
<div id="app"><%- typeof spruce !== 'undefined' ? spruce.content : '' %></div>
</body>
</html>Built with webpack:
// webpack.config.js
const SpruceWebpackConfig = require('@poool/spruce-webpack-config');
module.exports = SpruceWebpackConfig({
entry: './index.js',
templateEntry: './index.ejs',
});webpack --config webpack.config.jsAnd a server (that runs fastify under the hood):
// server.js
const { createServer } = require('@poool/spruce');
const stats = require('./dist/stats.json');
const App = require(`./dist/public/${stats.bundles.main}`).default;
(async () => {
const server = await createServer({
services: [{
name: 'main',
routes: [{
path: '/*',
view: 'default/index.ejs',
content: App,
}],
}],
});
server.listen(process.env.PORT || 5000);
})();You can find additional and advanced examples in the examples/ folder.
You can take a look at each individual package to find the configuration that fits your needs:
| Name | Description | |
|---|---|---|
@poool/spruce |
The main package that will create and run the server | documentation |
@poool/spruce-dom |
All the front-end components you will need for specific SSR tasks, like Metas |
documentation |
@poool/spruce-webpack-config |
The minimal config needed to build your app to be compatible with SSR | documentation |
Please check the CONTRIBUTING.md doc for contribution guidelines.
Install root & example dependencies:
yarn install
cd examples/basic && yarn installRun example at http://localhost:8000/ with webpack dev server:
cd examples/basic && yarn serveAnd test your code:
yarn testThis software is licensed under MIT.
Ugo Stephant 💻 📖 🔧 |
|---|