Vite template

Demo links

• Streaming supported
  • SSR Docker (Streaming supported)
• Streaming NOT supported
  • SSR Amplify (Streaming not supported)
  • SSR Vercel (Streaming not supported)
  • SPA Amplify

Explore

• prod current branch with Mobx + Store Manager, Head Manager (meta), Route Manager
• feature/localization branch with example of localization

Used libraries

• VITE SSR BOOST
• CONSISTENT SUSPENSE
• REACT MOBX MANAGER
• REACT HEAD MANAGER
• REACT ROUTE MANAGER

Local development

git clone git@github.com:Lomray-Software/vite-template.git
npm ci
npm run develop

Structure

• constants/index - configure application constants
• common/services/route-manager - configure site routes

Bundle analyze

vite-bundle-visualizer

Git workflow

NOTE: see .github for understand CI/CD

1. Create feature, bugfix, etc.
2. Create Pull Request & test
3. Squash & merge into prod

Some cases to pay attention to.

• Right solution for wrap <Outlet /> into <Suspense />. If you would like to wrap your lazy routes only once:

import { Outlet, useLocation } from 'react-router-dom';
import type { FCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';
import { Suspense } from '@lomray/consistent-suspense';

/**
 * NOTE: without key it's doesn't work
 * @see https://github.com/remix-run/react-router/issues/10568
 * @constructor
 */
const MyLayout: FCRoute = () => {
  const { key } = useLocation();

  return (
    <Suspense key={key}>
      <Outlet/>
    </Suspense>
  )
}

• In some cases nested Suspense should be memorized for preventing "This Suspense boundary received an update before it finished hydrating."

/**
 * Parent component can receive update what will entail rerender.
 * We should avoid rerenders for children suspense. 
 * @constructor
 */
const Parent: FC = () => {
  /**
   * Memorize Suspense to avoid errors
   */
  const children = useMemo(
    () => (
      <Suspense fallback={<Fallback/>}>
        <UserWrapper id={id} fields={restFields}/>
      </Suspense>
    ),
    [],
  );

  return (
    <div style={{ paddingLeft: '50px', textAlign: 'left' }}>
      {children}
    </div>
  );
}

Docker build

See github workflow or

npm run build
ssr-boost build-docker --image-name test-image

AWS Amplify build (amplify.yml) - SPA

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18.19.0
        - npm ci
    build:
      commands:
        - npm run build -- --only-client
  artifacts:
    baseDirectory: build/client
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

AWS Amplify build (amplify.yml) - SSR

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18.19.0
        - npm pkg delete scripts.prepare
        - npm ci
    build:
      commands:
        - npm run build -- --eject
        - npm run build:amplify
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Vercel build (vercel.json) - SSR

{
  "buildCommand": "npm pkg delete scripts.prepare && npm run build -- --serverless && npm run build:vercel",
  "installCommand": "npm ci",
  "outputDirectory": ".vercel/output"
}