FORJEX
Skip to documentation
React + Vite

Framework guides

React + Vite

Create a React single-page application with TypeScript.

On this page

Choose your starting point

Start with a fresh React + Vite project, or keep the application you already have.

Create a new app

Generate this starter locally with the CLI.

Use an existing app

Keep your files and set up your repository.

Connect & ship

Add GitHub, build checks, and deployment.

Before you start

Node.js 20.19 or newer and npm.

Create your project from a folder where you keep your work. Forjex creates a new subfolder and refuses to overwrite an existing one. No GitHub or Vercel account is required to create and run the starter.

Create your React + Vite project

1

Generate the starter

Run this command from your terminal. It downloads and runs the Forjex CLI.

pnpm dlx forjex create my-react-app --template react

Forjex offers to install dependencies with npm. Accept to continue, or skip and run npm install yourself.

The package-manager buttons select how you run Forjex. Node starter dependencies are installed with npm by the CLI. After creation, interactive mode offers to continue into GitHub, optional CI/CD, and deployment. Choose No or use --no-setup to finish locally.

2

Start the development server

cd my-react-app
# If you skipped dependency installation:
# npm install
npm run dev

Open the local URL printed by Vite, normally http://localhost:5173. You will see the Forjex welcome page with a rotating logo. Open /docs for the generated file guide.

3

Make your first change

Edit src/App.tsx. The development server updates the page as you save.

Start with the home feature, keep shared UI in components/ui, and add your application features alongside it.

4

Check the production build

npm run build

Run this before sharing your work. A successful local build or test does not deploy the application.

What gets created

  • React and Vite with feature-based components and shared layouts
  • Reusable UI, typed hooks, constants, and configuration
  • Typed API client, shared errors, utilities, and unit tests
  • ESLint, Prettier, import aliases, environment example, and favicon.ico
Project structure
├── public/
│   ├── favicon.ico
│   ├── favicon.svg
│   └── forjex.svg
├── src/
│   ├── components/
│   │   ├── layout/
│   │   │   ├── site-footer.tsx
│   │   │   └── site-header.tsx
│   │   └── ui/
│   │       └── button.tsx
│   ├── config/
│   │   ├── env.ts
│   │   └── site.ts
│   ├── constants/
│   │   └── routes.ts
│   ├── features/
│   │   ├── docs/
│   │   │   ├── file-guide.ts
│   │   │   └── starter-docs.tsx
│   │   └── home/
│   │       ├── components/
│   │       │   ├── counter.tsx
│   │       │   └── home-screen.tsx
│   │       ├── data/
│   │       │   └── setup-steps.ts
│   │       └── types.ts
│   ├── hooks/
│   │   └── use-counter.ts
│   ├── lib/
│   │   └── api-error.ts
│   ├── services/
│   │   └── api-client.ts
│   ├── styles/
│   │   └── globals.css
│   ├── types/
│   │   ├── api.ts
│   │   └── navigation.ts
│   ├── utils/
│   │   └── format.ts
│   ├── App.tsx
│   ├── main.tsx
│   └── vite-env.d.ts
├── tests/
│   ├── api-client.test.ts
│   └── format.test.ts
├── .editorconfig
├── .env.example
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── eslint.config.mjs
├── index.html
├── package.json
├── README.md
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts

This is the complete default local file tree before installing dependencies. It includes the README and a language-specific .gitignore. The welcome page introduces Forjex with a pearl-white logo and a perspective-based rotation. Reduced-motion preferences disable the animation. The /docs page explains the generated files, commands, and deployment workflow. Styles use shared CSS with design tokens.

Where your application code belongs

  • features/: keep a feature’s components, data, and types together.
  • components/ui and components/layout: reusable controls and shared page structure.
  • hooks/: reusable client state, demonstrated by use-counter.
  • types/, constants/, and config/: shared contracts, route constants, public environment settings, and app identity.
  • services/, lib/, and utils/: typed API requests, shared errors, and pure formatting helpers.
  • tests/: mocked API-client tests and utility tests; no provider credentials are needed.
Verify the starter
npm run check
npm run build

Copy .env.example to .env.local if you want to configure an API origin. The API client makes no requests until you call it. Dependency installation creates node_modules/ and the lockfile; CI/CD and deployment configuration are added only when selected.

Already have a project?

Skip the create command. Open your existing React + Vite project folder and run:

npx forjex forge

Choose Use the existing project in this directory. The CLI uses your local application files for repository setup; it does not replace them with a starter. Review existing workflows and configuration before enabling generation.

Follow the existing-project guide →

Connect GitHub and ship

Creation offers to continue into GitHub, optional CI/CD, and deployment. To continue later, run npx forjex forge from the generated project folder and choose the existing-project path. You can create a GitHub repository, add CI/CD, and push your code.

Vercel deployment is optional. Follow the deployment guide for credentials and status details.

GitHub setupBuild checks & CI/CDDeploy to Vercel

Prefer a visual setup? The browser wizard also offers this framework.