How to set up a frontend dev environment in Replit

Click the Create App button on the Replit dashboard. You have two options. First, you can describe your project to Agent in natural language, such as 'Create a React app with Tailwind CSS and a landing page.' Agent sets up the project structure, installs dependencies, and configures everything automatically. Second, you can search for a React or Vite template to start with a preconfigured boilerplate. The default and best-supported frontend stack on Replit is React with Tailwind CSS and ShadCN UI. Agent produces the most reliable results with this combination.

Open the .replit file by enabling Show hidden files from the three-dot menu in the file tree. The .replit file uses TOML format and controls how your app runs. Set the run command to start the Vite development server. Configure the port mapping so Replit knows which local port to expose in the preview pane. Vite defaults to port 5173 but you can set it to any port. The externalPort must be 80 for the preview to work correctly.

1entrypoint = "src/main.tsx"
2
3run = "npm run dev"
4
5[nix]
6channel = "stable-24_05"
7packages = ["nodejs-20_x"]
8
9[[ports]]
10localPort = 5173
11externalPort = 80
12
13[deployment]
14run = ["npm", "run", "start"]
15build = ["npm", "run", "build"]

If Agent did not already configure Tailwind, install it manually from the Shell. Run the install command for Tailwind and its peer dependencies, then initialize the configuration files. Update the tailwind.config.js content paths to point to your source files. Add the Tailwind directives to your main CSS file. Vite handles PostCSS processing automatically, so Tailwind utility classes work immediately after this setup.

1npm install -D tailwindcss @tailwindcss/vite

Vite includes hot module replacement by default, which updates the browser preview without a full page reload when you save a file. In Replit, this works through the preview pane's WebSocket connection to the Vite dev server. Make sure your package.json dev script includes the --host flag so Vite binds to 0.0.0.0 instead of localhost. Without this flag, the preview pane may not connect to the dev server properly. Edit the scripts section of package.json to add the flag.

1{
2  "scripts": {
3    "dev": "vite --host 0.0.0.0",
4    "build": "vite build",
5    "preview": "vite preview --host 0.0.0.0"
6  }
7}

Replit lets you arrange panes to create an efficient layout. A productive frontend setup uses three panes: the file tree and code editor on the left, the preview pane on the right showing your running app, and a Shell or Console pane at the bottom. Split panes by clicking the three-dot menu on any tab and selecting Split Right or Split Down. Drag tabs between panes to rearrange them. Toggle the file tree with the folder icon on the left sidebar. Hide generated files like node_modules and package-lock.json by adding them to the hidden array in your .replit file.

1# Add to .replit to hide clutter from the file tree
2hidden = [".config", "node_modules", "package-lock.json", "dist"]

ShadCN UI is the recommended component library on Replit because Agent understands it best. Install it through the Shell using the shadcn CLI. The init command sets up the components.json configuration, installs required dependencies, and creates the component directory structure. After initialization, add individual components as needed. Each component is copied into your source code rather than imported from node_modules, giving you full control to customize them.

1# Initialize shadcn/ui in your project
2npx shadcn@latest init
3
4# Add specific components
5npx shadcn@latest add button
6npx shadcn@latest add card
7npx shadcn@latest add input