Vite SSR BOOST template
git clone [email protected]:Lomray-Software/vite-template.git
npm ci
npm run develop
constants/index
- configure application constantscommon/services/route-manager
- configure site routesvite-bundle-visualizer
NOTE: see .github for understand CI/CD
prod
<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>
)
}
/**
* 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>
);
}
npm run build
ssr-boost build-docker --image-name test-image
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/**/*
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/**/*
{
"buildCommand": "npm pkg delete scripts.prepare && npm run build -- --serverless && npm run build:vercel",
"installCommand": "npm ci",
"outputDirectory": ".vercel/output"
}