Shashwata Saha Folio

Features

• Optimized for serverless deployment to CDN edge locations (Cloudflare Workers)
• HTML page rendering (SSR) at CDN edge locations, all ~100 points on Lighthouse
• Hot module replacement during local development using React Refetch
• Pre-configured with CSS-in-JS styling using Emotion.js
• Pre-configured with code quality tools: ESLint, Prettier, TypeScript, Vitest, etc.
• Pre-configured with VSCode code snippets and other VSCode settings
• The ongoing design and development is supported by these wonderful companies:

    

---

This project was bootstrapped with React Starter Kit. Be sure to join our Discord channel for assistance.

Directory Structure

├──.github — GitHub configuration including CI/CD workflows
├──.vscode — VSCode settings including code snippets, recommended extensions etc.
├──app — Web application front-end built with React and Joy UI
├──edge — Cloudflare Workers (CDN) edge endpoint
├──env — Application settings, API keys, etc.
├──scripts — Automation scripts such as yarn deploy
├──tsconfig.base.json — The common/shared TypeScript configuration
└──tsconfig.json — The root TypeScript configuration

Tech Stack

• React, React Router, Jotai, Emotion, Joy UI, Firebase Authentication
• Cloudflare Workers, Vite, Vitest, TypeScript, ESLint, Prettier, Yarn with PnP

Requirements

• Node.js v18+ with Corepack ($ corepack enable)
• VS Code editor with recommended extensions
• Optionally React Developer Tools and Reactime browser extensions

Getting Started

Generate a new project from this template, clone it, install project dependencies, update the environment variables found in env/*.env, and start hacking:

$ git clone https://github.com/kriasoft/react-starter-kit.git example
$ cd ./example
$ corepack enable
$ yarn install
$ yarn workspace app start

The app will become available at http://localhost:5173/ (press q + Enter to exit).

IMPORTANT: Ensure that VSCode is using the workspace version of TypeScript and ESLint.

Scripts

• yarn start — Launches the app in development mode on http://localhost:5173/
• yarn build — Compiles and bundles the app for deployment
• yarn lint — Validate the code using ESLint
• yarn tsc — Validate the code using TypeScript compiler
• yarn test — Run unit tests with Vitest, Supertest
• yarn edge deploy — Deploys the app to Cloudflare

How to Deploy

Ensure that all the environment variables for the target deployment environment (test, prod) found in /env/*.env files are up-to-date.

If you haven't done it already, push any secret values you may need to CF Workers environment by running yarn workspace edge wrangler secret put <NAME> [--env #0].

Finally build and deploy the app by running:

$ yarn build
$ yarn deploy [--env #0] [--version #0]

Where --env argument is the target deployment area, e.g. yarn deploy --env=prod.

How to Update

• yarn set version latest — Bump Yarn to the latest version
• yarn upgrade-interactive — Update Node.js modules (dependencies)
• yarn dlx @yarnpkg/sdks vscode — Update TypeScript, ESLint, and Prettier settings in VSCode

License

Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE file.

---

^{Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors.}