1. First steps

1.4 The first project, step by step

A complete walkthrough in ten minutes: create a project, start it, see it in the browser and open it in the editor.

In the app: «New project»

In short

  • A complete example: a small TypeScript website with Vite, from creation to the browser.
  • All you need is the Node.js component, which the kit installs by itself if it is missing, and an Internet connection.
  • By the end you will know how to create a project, start it, open it in the browser and edit it in the editor.

1. Create the project

  1. Open the “Projects” page from the activity bar.
  2. In the “Quick panel”, under “New project”, in the “Web” block, click “Vite” (under “Web with JavaScript and TypeScript”). The “New project” tab opens.
  3. In “1. Base” the “Vite” card (“Website or web application in TypeScript”) is already chosen.
  4. In “2. Additions” nothing is needed for this test.
  5. In “3. Name” type primo-sito. The name becomes the projects\primo-sito folder.
  6. Look at the “Summary”: you will see that the kit will use Node.js, run npm create vite in the projects folder and then npm install in the project, and save the “Start” and “Build” actions.
  7. Press “Create the project”. In the “Progress” part the commands and their output scroll by.
  8. When “Project primo-sito created.” appears, press “Open the project”.

2. Start it and open it in the browser

  1. The project page opens on the “Run” section. At the bottom, the “Actions” list shows what the project can do: the actions recognized from the package.json file (npm run dev, npm run build, npm install) and those from the recipe (Start, Build).
  2. Press ▶ next to “npm run dev”. It is a web action: the kit assigns it a port, starts it and waits for it to respond. The status goes from “starting” to “listening”.
  3. Press “Open in the browser”: Vite's sample site opens at http://localhost:<port>/, where the port is a number between 7100 and 7999 chosen by the kit and kept the same at every start.
  4. Do you want the big “Start” button at the top to always start this action? Select it and press the “Default” star.

3. Edit it in the editor

  1. Press “Editor” at the top of the project page. The kit starts the editor (the first time it may take a few seconds) and opens an Atollo window with the project folder.
  2. Open src/main.ts, change some text and save with Ctrl+S.
  3. Go back to the browser: Vite updates the page by itself.
  4. To stop the website go back to Atollo and press “Stop” (or ■ next to the action). Closing Atollo stops everything anyway.

What next?