Quick Start ​

Try Xeito Online ​

You can try Xeito online without installing anything on your machine.
Just go to out StackBlitz already configured with a complete build setup and start coding!

Creating a Xeito application ​

In this section we'll create a basic Xeito application on your local machine. The created project will be using the Xeito Command Line tool, which handles most of the complexity and project configuration.

Make sure to have an updated version of Node.js installed, then run the following command in your command line (without the > sign):

> npm install -g @xeito/cli

This command will install the Xeito command line and make it available globally for further use. We now need to use it to create a new Xeito application by choosing a folder and running:

> xeito new

This will prompt you with the project scaffolding tool. You will be asked for a the project's name and a template to use. For the purposes of this tutorial, let's choose the basic template:

> xeito new
? Project name: <your-project-name>
? Select a template (use arrow keys)
  > basic
    basic-router

Once the project is created, follow the instructions to install the dependencies and start the dev server:

> cd <your-project-name>
> npm install
> npm run dev

The project generated by the Xeito CLI contains a basic structure that you can use to start building your application, it uses Vite as the build tool and Typescript as the main language. Vite is a fast and lightweight tool that will take care of compiling your Typescript and bundle your application for production, it also provides a development server that will automatically reload your application when you make changes to your code. Vite will also provide CSS/SCSS scoping for your components, so you don't have to worry about CSS conflicts between components.

Now you should have your first Xeito project up and running! Here are some additional tips:

• The recommended IDE is Visual Studio Code and the lit-plugin extension. The lit-plugin extension will provide syntax highlighting and auto-completion for the HTML templates even if you don't see it in the examples here.
• Check the Typescript Handbook to get familiar with the syntax if you're not already.

Next steps ​

If you skipped the Introduction section, we recommend you to read it before continuing with the rest of the documentation.