@brendonjohn/react-ssr-static

v0.19.10

Published

3 years ago

Yet another React static site generator

Downloads

0High
0Medium
0Low

brendonjohn

react static static-site-generator server-side-rendering ssr view-engine view-template-engine

Overview

Static site generator by using React SSR (Server Side Rendering)
Developer Experience
- Dynamic Head component for better SEO
- HMR (Hot Module Replacement) when process.env.NODE_ENV !== 'production'
- Automatically reflect to the browser as soon as you save the scripts and even if styles

Usage

Install it:

$ npm install --save @react-ssr/static react react-dom

And add a script to your package.json like this:

{
  "scripts": {
    "dev": "static",
    "build": "static build"
  }
}

Then, populate files below inside your project:

.babelrc:

{
  "presets": [
    "@brendonjohn/react-ssr-static/babel"
  ]
}

static.config.js:

module.exports = {
  routes: {
    '/': 'index',
  },
};

views/index.jsx:

export default function Index() {
  return <p>Hello Static Site</p>;
}

Finally,

run npm run dev and you'll see Hello Static Site in your browser.
run npm run build and you'll see the static files in the dist directory.

A working examples are here:

Configuration (`static.config.js`)

Here is the default static.config.js, which is used by react-ssr when there are no valid values:

module.exports = {
  id: 'default',
  distDir: 'dist',
  viewsDir: 'views',
  port: 3000,
  routes: {},
  publicPaths: [],
  webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {
    return config;
  },
};

`static.config.js#id`

The id of UI framework. (default: default)

It can be ignored only when the project does not use any UI frameworks.

Supported UI frameworks are:

[x] default (the id default doesn't need to be specified in static.config.js)
- [x] bulma
- [x] semantic-ui
- [x] Or any other non CSS-in-JS UI frameworks
[x] emotion
[x] styled-components
[x] material-ui
[x] antd
[ ] and more...

For example, if we want to use emotion, static.config.js is like this:

module.exports = {
  id: 'emotion',
};

`static.config.js#distDir`

The place where react-ssr generates static files. (default: dist)

module.exports = {
  distDir: 'out',
};

`static.config.js#viewsDir`

The place where we put views. (default: views)

module.exports = {
  viewsDir: 'pages',
};

`static.config.js#port`

The port of the development server. (default: 3000)

module.exports = {
  port: 4000,
};

`static.config.js#routes`

The key is the route, and the value is the path from the views directory.

module.exports = {
  routes: {
    '/': 'index',
    '/login': 'auth/login',
  },
};

`static.config.js#publicPaths`

The place where we put static files like images.

module.exports = {
  publicPaths: [
    'public',
  ],
};

`static.config.js#webpack()`

module.exports = {
  webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {
    // we can override default webpack config here
    return config;
  },
};

Custom Document

Just put _document.jsx or _document.tsx into the views root:

views/_document.jsx:

import React from 'react';
import {
  Document,
  Head,
  Main,
} from '@react-ssr/static';

export default class extends Document {
  render() {
    return (
      <html lang="en">
        <Head>
          <title>Default Title</title>
          <meta charSet="utf-8" />
          <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
          <link rel="shortcut icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
        </body>
      </html>
    );
  }
};

Note:

Please put <Main /> component directly under <body> tag and don't wrap <Main /> component with another components, because this is a hydration target for the client.

And then, use it as always:

views/index.jsx:

const Index = () => {
  return <p>Hello World!</p>;
};

export default Index;

A working example is here: examples/basic-custom-document

Dynamic `Head`

We can use the Head component in any pages:

views/index.jsx:

import React from 'react';
import { Head } from '@react-ssr/static';

const Index = (props) => {
  return (
    <React.Fragment>
      <Head>
        <title>Dynamic Title</title>
        <meta name="description" content="Dynamic Description" />
      </Head>
      <p>Of course, SSR Ready!</p>
    </React.Fragment>
  );
};

export default Index;

A working example is here: examples/basic-dynamic-head

Supported UI Framework

[x] default (the id default doesn't need to be specified in static.config.js)
- [x] bulma
- [x] semantic-ui
- [x] Or any other non CSS-in-JS UI frameworks
[x] emotion
[x] styled-components
[x] material-ui
[x] antd
[ ] and more...

Non CSS-in-JS framework

Like semantic-ui, non CSS-in-JS frameworks are supported without extra configuration.

All we have to do is to load global CSS in _document or each page:

views/_document.jsx:

import React from 'react';
import {
  Document,
  Head,
  Main,
} from '@react-ssr/static';

export default class extends Document {
  render() {
    return (
      <html>
        <Head>
          <title>A Sample of Semantic UI React</title>
          <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" />
        </Head>
        <body>
          <Main />
        </body>
      </html>
    );
  }
}

With Ant Design

In order to enable SSR, we must install babel-plugin-import as devDependencies.

And then, populate .babelrc in your project root:

{
  "presets": [
    "@brendonjohn/react-ssr-static/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

A working example is here: examples/with-jsx-antd

With Emotion

In order to enable SSR, we must install these packages:

@emotion/cache as dependencies
create-emotion-server as dependencies
babel-plugin-emotion as devDependencies

And then, populate .babelrc in your project root:

{
  "presets": [
    "@brendonjohn/react-ssr-static/babel"
  ],
  "plugins": [
    "emotion"
  ]
}

A working example is here: examples/with-jsx-emotion

With Material UI

We can use material-ui without extra configuration.

A working example is here: examples/with-jsx-material-ui

With styled-components

In order to enable SSR, we must install babel-plugin-styled-components as devDependencies.

And then, populate .babelrc in your project root:

{
  "presets": [
    "@brendonjohn/react-ssr-static/babel"
  ],
  "plugins": [
    "styled-components"
  ]
}

A working example is here: examples/with-jsx-styled-components

TypeScript Support

To enable TypeScript engine (.tsx), just put tsconfig.json in your project root directory.

Examples

@react-ssr/express
- .jsx
- .tsx
  - examples/basic-tsx
@react-ssr/nestjs-express
- examples/basic-nestjs
- examples/basic-nestjs-nodemon
@react-ssr/static
- .jsx
  - examples/basic-jsx-static
  - examples/with-jsx-static-bulma
- .tsx
  - examples/basic-tsx-static

Starters

Articles

Introducing an Alternative to NEXT.js

[Express] React as a View Template Engine?

reactjs/express-react-views

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Overview

Usage

Configuration (static.config.js)

static.config.js#id

static.config.js#distDir

static.config.js#viewsDir

static.config.js#port

static.config.js#routes

static.config.js#publicPaths

static.config.js#webpack()

Custom Document

Dynamic Head

Supported UI Framework

Non CSS-in-JS framework

With Ant Design

With Emotion

With Material UI

With styled-components

TypeScript Support

Examples

Starters

Articles

Related

Configuration (`static.config.js`)

`static.config.js#id`

`static.config.js#distDir`

`static.config.js#viewsDir`

`static.config.js#port`

`static.config.js#routes`

`static.config.js#publicPaths`

`static.config.js#webpack()`

Dynamic `Head`