@vavra7/compiler

v2.7.0

Published

2 years ago

It runs Webpack under the hood to bundle application. Client part and server part allowing React to be server side rendered.

Downloads

0High
0Medium
0Low

vavra7

Plain SSR React app compiler

It runs Webpack under the hood to bundle application. Client part and server part allowing React to be server side rendered.

Preconditions

SSR React app written in Typescript

Commands

development mode: compiler dev
prod bundle: compiler build
bundle analyzer: compiler build -a

Entry points

src/index.server.tsx
src/index.client.tsx

Example of usage

Folder structure

.
├── dist
│   ├── bundles.json
│   ├── index.js
│   └── static
│       ├── js
│       │   ├── main.js
│       │   ├── main.js.gz
│       │   ├── react.js
│       │   └── react.js.gz
│       └── media
│           └── 6576f3a9a340ac02328d.jpg
├── node_modules
├── public
│   └── favicon.ico
├── src
│   ├── assets
│   │   └── media
│   │       └── logo.jpg
│   ├── index.client.tsx
│   ├── index.server.tsx
│   └── root.tsx
├── .compilerrc.ts
├── package.json
└── tsconfig.json

.compilerrc.ts

Optional configuration file.

import { RunCommands } from '@vavra7/compiler';

const runCommands: RunCommands = {
  features: {
    emotions: true,
    styledComponents: false
  },
  webpackClient: (config) => config,
  webpackServer: (config) => config,
};

export default runCommands;

src/root.tsx

import type { FC } from 'react';
import React from 'react';

const Root: FC = () => {
  return (
    <>
      <img alt="logo" className="App-logo" src={require('./assets/media/logo.jpg')} />
      <div>Root of React application.</div>
    </>
  );
};

export default Root;

src/index.server.tsx

import fs from 'node:fs';
import path from 'node:path';

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';

import Root from './root';

const app = express();
const bundles = JSON.parse(fs.readFileSync(path.join(__dirname, './bundles.json'), 'utf-8'));

app.use('/', express.static(path.join(__dirname, '../public')));
app.use(
  '/static',
  (req, res, next) => {
    if (req.originalUrl.match(/^\/static\/js\/.*.js$/)) {
      req.url = req.url + '.gz';
      res.set('Cache-Control', 'max-age=31536000');
      res.set('Content-Encoding', 'gzip');
      res.set('Content-Type', 'text/javascript');
    }
    next();
  },
  express.static(path.join(__dirname, './static'))
);
app.use('*', (req, res) => {
  const app = <Root />;
  const markup = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="${bundles['main.js']}" defer></script>
        <script src="${bundles['react.js']}" defer></script>
        <title>Document</title>
      </head>
      <body>
        <div id="root-container">
          ${renderToString(app)}
        </div>
      </body>
    </html>
  `;
  res.setHeader('Content-Type', 'text/html');
  res.end(markup);
});

app.listen(3000, () => console.log('Server is listening on http://localhost:3000'));

src/index.client.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';

import Root from './root';

if (module?.hot) module.hot.accept();

const container = document.getElementById('root-container');
const root = createRoot(container!);
root.render(<Root />);

Known problems

https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/725