diff --git a/docs/content/1.guide/0.getting-started.md b/docs/content/1.guide/0.getting-started.md index 1822737e53..43ea755be6 100644 --- a/docs/content/1.guide/0.getting-started.md +++ b/docs/content/1.guide/0.getting-started.md @@ -4,10 +4,16 @@ icon: ri:rocket-2-line # Getting Started -Let's create a new Nitro app in few steps. + ## Play Online +The easiest way to get started with Nitro is to use the online playground. + :button-link[Open on Stackblitz]{href="https://stackblitz.com/github/unjs/nitro/tree/main/examples/hello-world" icon="simple-icons:stackblitz" blank style="margin-right: 10px;margin-bottom:10px;"} :button-link[Open on CodeSandbox]{href="https://codesandbox.io/p/sandbox/nitro-template-5jssbm" icon="simple-icons:codesandbox" blank} @@ -17,8 +23,8 @@ Let's create a new Nitro app in few steps. #summary Make sure you have installed the recommended setup: #content -* **Node.js*** (latest LTS version) 👉 [[Download](https://nodejs.org/en/download/)] -* **Visual Studio Code** [[Download](https://code.visualstudio.com/)] +* **Node.js*** (latest LTS version) 👉 [Download](https://nodejs.org/en/download/) +* **Visual Studio Code** [Download](https://code.visualstudio.com/) * [corepack](https://nodejs.org/api/corepack.html) for using pnpm and yarn. 👉 Run `corepack enable` :: @@ -66,14 +72,13 @@ bun install :: - Start the development server: ```bash npm run dev ``` -🪄 Your API is ready at `http://localhost:3000/` +Nitro is ready at `http://localhost:3000/`! ::alert Check `.nitro/dev/index.mjs` if want to know what is happening @@ -83,7 +88,7 @@ Build your production-ready server: ```bash npm run build -```` +``` Output is in the `.output` directory and ready to be deployed on almost any provider with no dependencies. @@ -93,6 +98,35 @@ You can try it locally with: npm run preview ``` +::alert{type="info"} +You can find more examples in the Nitro repository: [unjs/nitro/examples](https://github.com/unjs/nitro/tree/main/examples) +:: + +### Files + +The starter template some important files to get you started. + +`package.json` + +The `package.json` file contains all the dependencies and scripts for your project. + +`nitro.config.ts` + +The `nitro.config.ts` file contains the configuration for Nitro. + +`tsconfig.json` + +The `tsconfig.json` file contains the TypeScript configuration for your project. It extends an automatically generated `./.nitro/types/tsconfig.json` file that contains the configuration for Nitro. + +You can use `npm run prepare` to generate some Nitro files in `.nitro` directory. + +::alert{type="info"} +Do not change this file directly, use `typescript` key in `nitro.config.ts` instead. +:: + +`routes/**/*.{ts,js}` + +The `routes` directory contains your application handlers. You can create subdirectories inside `routes` to create nested handlers. The file name is the route path. ## Nightly Release Channel