create-react-ssr-layout
v1.3.7
Published
A useful tool to quickly build a starting express server that uses custom SSR with a custom jsx render engine
Downloads
26
Readme
create-react-ssr-layout
A useful npx tool to quickly build a basic express server that uses a custom-built SSR engine.
Usage
Simply run this command in your terminal
npx create-react-ssr-layout@latest
to setup a project in the current directory or
npx create-react-ssr-layout@latest <projectname>
Answer questions via cli and pick a server build. You may use a predefined one or customize the build on your own. All required dependencies will be installed automatically.
Quick start
Execute this package
npx create-react-ssr-layout@latest .
Answer some questions and wait until all files are created and all dependencies are installed. To launch the server use
npm start
The server starts on port 3000 by default. Go to http://localhost:3000/
to open the page.
Scripts
npm start
Executes webpack to create bundles and then launches the server on a specified port via babel-node.
npm run deps
Installs all chosen dependencies at once. Picking "Maximum server" option will install the following
- dependencies: express, react, react-dom, react-router-dom, sequelize, pg, pg-hstore, dotenv, express-session, session-file-store, bcrypt, axios
- devDependencies: @babel/node, @babel/plugin-proposal-class-properties, @babel/preset-react, @babel/preset-env, babel-loader, morgan, webpack, webpack-cli, sequelize-cli
The option "Minimum server" will install the following
- dependencies: express, react, react-dom
- devDependencies: @babel/node, @babel/preset-react, @babel/preset-env
Each custom option picked adds required dependencies and/or devDependencies.
npm run launch
Performs migrations and seeds a database. Then executes webpack and launches the server. Before executing this script run npx sequelize-cli --init
, prepare and configure a database, make required changes to .env
file.
npm run dev
Only starts the server.
npm run webpack
Starts webpack in watch mode.
Project tree
.
├── package.json
├── .babelrc
├── .env
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .sequelizerc
├── src
│ ├── components
│ │ ├── App.jsx
│ │ ├── index.jsx
│ │ └── Layout.jsx
│ ├── middlewares
│ │ └── resLocals.js
│ ├── routes
│ │ ├── apiRouter.js
│ │ └── indexRouter.js
│ ├── server.js
│ └── utils
│ └── jsxRender.js
└── webpack.config.js
Used packages
- React-based
- react
- react-dom
- react-router-dom
- Server-based
- express
- express-session
- session-file-store
- dotenv
- morgan
- bcrypt
- axios
- Sequelize
- sequelize
- sequelize-cli
- pg
- pg-hstore
- Babel
- @babel/node
- @babel/plugin-proposal-class-properties
- @babel/preset-react
- @babel/preset-env
- Webpack
- webpack
- webpack-cli
- babel-loader
SSR
The server uses custom jsx render engine that constructs a markup on the server side via renderToString()
method from react-dom/server
. The object initState
is used to deliver data from server through props directly to the App.jsx
component. For routing purposes req.originalUrl
is included into res.locals
.
Two routers are added for convenience. indexRouter
uses res.render
method for rendering markups. res.render
requires a string Layout
to be passed as its first argument. The second argument may be ommited. Use it to pass props to App.jsx
.
Layout.jsx
has basic HTML markdown. It uploads webpack scripts app.js
and vendor.js
and uses dangerouslySetInnerHTML
to pass initState
to client side for the hydration process (if an option webpack
with hydration was picked).
Issues
Use GitHub issues to report about any problems or bugs