# New project

> Start a site from midcode's hub, with the starters it offers, the exact command each one runs, what has to be on your Mac, and what you get.

- Page: https://midcode.app/docs/start/new-project
- From the midcode docs. Every page as Markdown: https://midcode.app/llms.txt
- Status: This ships with the next release of midcode. The version you can download today (1.1.2) doesn't have it yet.

"New project" makes a project from scratch and opens it on the canvas. midcode doesn't have templates of its own: it runs the tool each framework's community uses (`create-next-app`, `create-vite`, `sv`, `ng`, `composer create-project`…) with every question already answered, in a folder you choose.

Use it when there's no project yet. If you already have one, [open its folder](https://midcode.app/docs/start/open-a-project.md).

## Make a project

1. On the hub, click "New project". With no projects yet, the same dialog is behind "Start a new project". From inside a project, the + at the end of the tab strip or `⌘N` (File → "New Project…") goes to the hub with the dialog open; your tab stays open behind it.
2. Under "Built with", choose the technology: React, Vue, Svelte, Angular, Solid, Astro, HTML, PHP, Python or Shopify.
3. Under "Start with", choose the starter. The first one is marked "Recommended".
4. Type a "Name". It becomes the folder's name, in lowercase with dashes: "My Site" makes `my-site`.
5. "Where" is the folder it's made in. Click it to choose another. midcode remembers the last one; the first time it offers `~/Developer` or `~/Documents`.
6. If more than one package manager is installed, choose it under "Package manager" (pnpm, npm, bun or yarn).
7. Click "Create project".

While it runs, the line at the bottom shows what the tool prints. "Cancel" stops it. The Node.js starters take about a minute. When it's done, midcode says "my-site is ready" and opens the project in a tab.

Making a project needs a license or a running trial, like any edit.

## Technologies and starters

| Built with | Start with | Needs on your Mac |
| --- | --- | --- |
| React | Next.js, Vite, React Router, Preact | Node.js |
| Vue | Nuxt, Vite | Node.js |
| Svelte | SvelteKit | Node.js |
| Angular | Angular | Node.js |
| Solid | Vite | Node.js |
| Astro | Astro | Node.js |
| HTML | Plain HTML | Nothing |
| HTML | Eleventy | Node.js |
| HTML | Hugo | Hugo |
| PHP | Laravel, Laravel + React, Laravel + Vue, Laravel + Livewire | PHP, Composer and Node.js |
| Python | Django, Flask | Python 3 |
| Shopify | Dawn, Skeleton, "A theme from your store" | The Shopify CLI, signed in |

"Node.js" means `node`, `npx` and at least one package manager on your shell's `PATH`.

When something is missing, the dialog says what and links to where to get it: "This needs Node.js on your Mac", "This needs Hugo on your Mac" (`brew install hugo`), "This needs PHP and Composer on your Mac" (Laravel Herd installs both), "This needs Python on your Mac". Install it and come back. For Shopify, the dialog shows the card that installs the CLI or signs you in: see [Shopify themes](https://midcode.app/docs/shopify/themes.md).

## What each starter runs

Commands run in your login shell, with `CI=1` so nothing stops to ask: the first in the "Where" folder, the rest inside the new project. `<name>` is the folder name and `<pm>` your package manager.

### React

Next.js:

```bash
npx --yes create-next-app@latest <name> --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*" --turbopack --use-<pm> --yes
```

Vite:

```bash
npx --yes create-vite@latest <name> --template react-ts
<pm> install
<pm> add -D tailwindcss @tailwindcss/vite
```

React Router:

```bash
npx --yes create-react-router@latest <name> --yes --no-git-init --install --package-manager <pm>
```

Preact is the Vite recipe with `--template preact-ts`. With npm, the third line is `npm install -D tailwindcss @tailwindcss/vite`.

After a Vite template, midcode adds the Tailwind plugin to `vite.config.ts`, writes `@import "tailwindcss";` as the stylesheet, and replaces the template's demo with one plain page. This is what it adds to the config:

```diff title="vite.config.ts"
+import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'

 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })
```

### Vue

Nuxt:

```bash
npx --yes nuxi@latest init <name> --template minimal --packageManager <pm> --no-gitInit --no-modules
<pm> add -D tailwindcss @tailwindcss/vite
```

midcode then writes `assets/css/main.css`, `app.vue` and a `nuxt.config.ts` that loads the stylesheet and the Tailwind plugin. Vite is the same recipe as React's, with `--template vue-ts`.

### Svelte, Angular, Solid, Astro

SvelteKit:

```bash
npx --yes sv@latest create <name> --template minimal --types ts --add tailwindcss="plugins:none" --install <pm>
```

Angular:

```bash
npx --yes @angular/cli@latest new <name> --defaults --style=tailwind --ssr=false --skip-git --skip-tests --ai-config=none --package-manager <pm>
```

Astro:

```bash
npx --yes create-astro@latest <name> --template minimal --no-install --no-git --yes
<pm> install
npx --yes astro add tailwind --yes
```

Solid is the Vite recipe with `--template solid-ts`. In each of these the first page (`src/routes/+page.svelte`, `src/app/app.html`, `src/pages/index.astro`, `src/App.tsx`) is replaced with the plain starting page.

### HTML

Plain HTML runs nothing. midcode writes three files: `index.html`, `style.css` and a `.gitignore`.

Eleventy is written by midcode too: a `package.json` with `@11ty/eleventy` and the scripts `dev` (`eleventy --serve`) and `build`, an `eleventy.config.js` that copies `public/` to the site's root, a layout in `_includes/base.njk`, `index.njk` and `public/style.css`. Then `<pm> install`.

Hugo:

```bash
hugo new site <name>
```

midcode adds the layouts (`layouts/_default/baseof.html`, `single.html`, `list.html`, and `layouts/index.html`) and `static/style.css`.

### PHP

Laravel:

```bash
composer create-project laravel/laravel <name> --no-interaction --prefer-dist
<pm> install
```

The three kits are the same command with Laravel's own starter kits: `laravel/react-starter-kit`, `laravel/vue-starter-kit` and `laravel/livewire-starter-kit`.

### Python

Django:

```bash
python3 -m venv .venv
.venv/bin/python -m pip install --quiet --disable-pip-version-check django
.venv/bin/django-admin startproject config .
```

midcode then adds `templates/base.html`, `templates/home.html` and `static/style.css` at the top of the project, points `config/settings.py` at them (`DIRS` and `STATICFILES_DIRS`), routes `/` to the home template in `config/urls.py`, and writes `requirements.txt`.

Flask:

```bash
python3 -m venv .venv
.venv/bin/python -m pip install --quiet --disable-pip-version-check flask
```

midcode writes `app.py` with one route, the same two templates, `static/style.css` and `requirements.txt`.

Both get a virtual environment of their own in `.venv`. It's what midcode runs the project with afterwards: see [Django, Flask and FastAPI](https://midcode.app/docs/frameworks/python.md).

### Shopify

Skeleton:

```bash
shopify theme init <name> --path <where>
```

Dawn:

```bash
shopify theme init <name> --path <where> --clone-url https://github.com/Shopify/dawn.git
```

A theme from your store:

```bash
shopify theme pull --store <store> --theme <id> --path <where>/<name>
```

For Dawn and Skeleton, "Store to work on it with" is optional ("Decide later"). For a theme from your store, choose the store and then the theme; the button reads "Download and open". The store is saved in `.midcode/shopify.json`.

## What you get

- **Tailwind 4**, set up by the tool or by midcode, in every React, Vue, Svelte, Angular, Solid, Astro and Laravel starter. It's what midcode writes styles with: see [Tailwind CSS](https://midcode.app/docs/styling/tailwind.md).
- **A plain stylesheet** (`style.css`) in Plain HTML, Eleventy, Hugo, Django and Flask. There, style edits use midcode's own utilities: see [Without Tailwind](https://midcode.app/docs/styling/without-tailwind.md).
- **One starting page** where the tool's own is a demo to delete: a heading, a paragraph and a button, ready to click.
- **TypeScript** where the tool offers it.
- **A git repository**. If the tool didn't make one, midcode runs `git init`. There's no commit and no remote: those are yours to make. A Shopify theme is left as the Shopify CLI makes it.
- **A `.gitignore`** in the projects midcode writes itself (Plain HTML, Eleventy, Hugo, Django, Flask).

If the tool fails, or you cancel, the half-made folder is deleted and the dialog shows the tool's last lines.

While the tools run, midcode sets `NEXT_TELEMETRY_DISABLED`, `ASTRO_TELEMETRY_DISABLED`, `NUXT_TELEMETRY_DISABLED`, `NG_CLI_ANALYTICS=false` and `DO_NOT_TRACK=1`.

## Limits

- There are no options beyond the ones in the dialog. For JavaScript instead of TypeScript, a `src/` folder, or another template, run the tool yourself and open the folder.
- The name is letters, digits and dashes. A folder with that name that isn't empty is refused: "There's already a folder named … there."
- A tool that runs longer than 15 minutes is stopped.
- Qwik isn't offered: the `create-vite` Qwik template doesn't install today. A Qwik project made by hand opens and is edited like Solid.
- Tried by creating and opening each one from midcode: Next.js 16, Vite + React, Vite + Vue (with pnpm), React Router, Astro, SvelteKit, Nuxt, Plain HTML, Angular 22, Vite + Solid and Vite + Preact. All of them came up editable on the canvas.
- Eleventy, Hugo, Laravel, Laravel + React, Django and Flask were created and opened from midcode too.
- Laravel + Vue and Laravel + Livewire were made with the same command run by hand, not from the dialog.