.
├── 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

FAQs

What is @vavra7/compiler?

Is @vavra7/compiler popular?

Is @vavra7/compiler well maintained?

Last updated on 30 Mar 2023

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.

Install