diff --git a/apps/documentation/src/components/EditPage/EditPage.tsx b/apps/documentation/src/components/EditPage/EditPage.tsx
index 87491f76..f0576258 100644
--- a/apps/documentation/src/components/EditPage/EditPage.tsx
+++ b/apps/documentation/src/components/EditPage/EditPage.tsx
@@ -12,7 +12,6 @@ export default function EditPage(): JSX.Element {
return (
}
diff --git a/apps/documentation/src/components/Sidebar/sidebarElements.ts b/apps/documentation/src/components/Sidebar/sidebarElements.ts
index 8e87ffef..05deae21 100644
--- a/apps/documentation/src/components/Sidebar/sidebarElements.ts
+++ b/apps/documentation/src/components/Sidebar/sidebarElements.ts
@@ -33,7 +33,12 @@ export const sidebarElements: Array = [
{
type: 'element',
label: 'Installation',
- href: '/documentation/installation',
+ href: '/documentation/getting-started/installation',
+ },
+ {
+ type: 'element',
+ label: 'Setup project',
+ href: '/documentation/getting-started/setup-project',
},
],
},
diff --git a/apps/documentation/src/routes/documentation/__layout.tsx b/apps/documentation/src/routes/documentation/__layout.tsx
index 2b5bb3a0..2e5e1597 100644
--- a/apps/documentation/src/routes/documentation/__layout.tsx
+++ b/apps/documentation/src/routes/documentation/__layout.tsx
@@ -14,7 +14,7 @@ export default function DocumentationLayout({
<>
{children}
-
+
>
diff --git a/apps/documentation/src/routes/documentation/installation.mdx b/apps/documentation/src/routes/documentation/getting-started/installation.mdx
similarity index 95%
rename from apps/documentation/src/routes/documentation/installation.mdx
rename to apps/documentation/src/routes/documentation/getting-started/installation.mdx
index a02b78bf..3512c36b 100644
--- a/apps/documentation/src/routes/documentation/installation.mdx
+++ b/apps/documentation/src/routes/documentation/getting-started/installation.mdx
@@ -2,7 +2,7 @@ import MetaTags from '@/components/MetaTags'
diff --git a/apps/documentation/src/routes/documentation/getting-started/setup-project.mdx b/apps/documentation/src/routes/documentation/getting-started/setup-project.mdx
new file mode 100644
index 00000000..12fc9ff3
--- /dev/null
+++ b/apps/documentation/src/routes/documentation/getting-started/setup-project.mdx
@@ -0,0 +1,73 @@
+import MetaTags from '@/components/MetaTags'
+
+
+
+import Breadcrumbs from '@/components/Breadcrumbs'
+
+
+
+# Setup project
+
+## Create project folder
+
+Tuono supports creating a new project from scratch using the `tuono new` CLI command.
+
+```sh
+tuono new my-first-tuono-app
+```
+
+> 💡 You can optionally pass the --template (or -t) flag to directly start from a [template](https://github.com/tuono-labs/tuono/tree/main/examples)
+
+Once the `tuono new` command finishes, move into the newly created folder.
+
+```sh
+cd my-first-tuono-app
+```
+
+## Install dependencies
+
+Now you can install the required dependencies.
+
+```sh
+npm install
+```
+
+> 💡 You can use another NodeJS package manager like `yarn` or `pnpm`
+
+## Run dev server
+
+Now you can run the dev server for the first time from using:
+
+```sh
+tuono dev
+```
+
+> ⏰ The first time, the process takes a bit longer to start because it needs to compile all of Rust's dependencies.
+> Subsequent executions will be much quicker!
+
+Once it's ready, a message will be displayed in the terminal.
+
+You can now open [http://localhost:3000/](http://localhost:3000) on the browser.
+
+## Build and test production build
+
+To build the project using production mode, simply run:
+
+```sh
+tuono build
+```
+
+The above command has created the final assets in the `out` directory.
+
+To run the production server, run:
+
+```sh
+cargo run --release
+```
+
+Again, you can access the website in production mode
+by going to [http://localhost:3000/](http://localhost:3000) in your browser.