Quick Start

Setup XylemJS project

The following steps shows how to create new XylemJS project.

1. Download XylemJS project template

To download XylemJS project template, use following command:

npx degit xylem-js/templates/js my-xylem-js-project

Alternatively, to use Typescript instead of Javascript, use following command:

npx degit xylem-js/templates/ts my-xylem-js-project

These commands use degit to scaffold new XylemJS project from https://github.com/xylem-js/templates repository.

2. Go to the project directory

cd my-xylem-js-project

3. Install npm dependencies

npm install

4. Start dev server

npm run dev

This starts a server at https://localhost:5173 .

⚠️ Notice: You may see warning in browser saying "invalid certifcate". Since self-signed certificate is used to enable HTTPS, it is normal for browser to show such warning. You can safely continue by clicking "Accept the Risk and Continue" button.

After you open the link, you will see "Hello World" text in the screen. You can edit the src/App.tsx file and the page reloads after saving any changes.

5. Build for production

npm run build

This generates files inside dist folder.

You can deploy the dist folder to host provider of your choice.

6. Preview production build

npm run preview

This starts a server at https://localhost:4173 .

If you want to add XylemJS to an already existing project or prefer installing packages manually, check the "Installation" page.