tiki

A framework in react community ✨

A framework support csr、ssr、ssg scene ✨

How to start?

Create a new project

npx @dztony/create-tiki -n your-app-name

Install dependencies

cd your-app-name

pnpm install

Start to write code

# dev server
pnpm run dev

# production build
pnpm run build

# production preview
pnpm run preview

Our goal

we need a framework to support csr、ssr、ssg scene for different project，but there it doesn't exist in community.

so I create a one.

What tiki contains?

• Scene：support CSR、SSR、SSG
• Command for different scene
  • tiki dev - support for whole scene
  • tiki build - support for whole scene
  • tiki preview - support for CSR、SSG scene
  • tiki deploy - support for SSR scene
• Support SSR fallback to CSR
  • ssr will fallback to csr if ssr encounter error
  • or you can add a field __renderMode=csr in query string to fallback. it is useful to debug api request
• Support React
• Support React Router
• Support typescript、tsx
• Support HMR and React Fast Refresh
• Support convention routes
• Support convention Layout
• Support custom configuration
• Support typescript in tiki config file
• Support hash
• Support bundle analyzer
• Support minimizer for js and css with esbuild-loader ability
• Support global constant definition

Core configuration for tiki.config.ts

required options

• scene：project scene
  • type: string
  • required: yes
  • value: csr | ssr | ssg

optional

• showHydratingError：whether to print hydration error in the browser console

  • type: boolean
  • required: no
  • default value: true

• useSyncRoute: whether to use sync route config

  • type: boolean
  • required: no
  • default value: true

• devPort: local dev server port

  • type: number
  • required: no
  • default value: 3000

• prodPort: preview server or deploy server port

  • type: number
  • required: no
  • default value: 9527

Tools in tiki

• react
• react router
• webpack：core pack logic
• esbuild：optimization tools