texel/docs/quick-start-texel-cli.md

# Quick Start: Texel CLI

The Texel command-line has the following format:

```sh
texel [commands] [entry.js] [options]
```

Texel has a few _commands_, but for now we will focus on the following three:

- `texel create` – Sets up a new project folder
- `texel start` – Starts a development server for live-coding
- `texel bundle` – Builds your JavaScript and CSS for production

Before you begin, ensure you have the latest version of Node.js and npm. For details, see [Installing Node.js and npm](#).

# Table of Contents

- Your First Project
  - [`create` – Project Setup](#)
  - [`start` – Development](#)
  - [`bundle` – Building for Production](#)
- Configuring Your Project
  - [Editing `npm run` Scripts](#)
  - [Using a Different CSS Pre-Processor](#)
  - [Using a Different JavaScript Entry Point](#)
- Other Bits
  - [Installing & Using Texel Globally](#)
  - [Adding Texel to an Existing Project](#)
  - [Removing Minification](#)

# Your First Project

## `create` – Project Setup

First, create a new folder and navigate into it:

```sh
# Create a new folder for your app
mkdir my-cool-app

# Move into that new folder
cd my-cool-app
```

Next, we can use the [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) command, which comes with npm, to quick start a new project.

```sh
npx texel create
```

This will automatically install and run the latest version of `texel`, creating a new project based on your current working directory (`my-cool-app`) and stubbing out any necessary files.

> ANIMATION OF INSTALL

## `start` – Development

After running `texel create`, you'll notice several new files in your project folder. During development, you will typically be editing the following files:

- `src/index.js` (JavaScript code)
- `src/style.css` (style sheet in CSS)
- `app/index.html` (website markup in HTML)

To begin development, you will need to run the `start` command via `npm run`. This will ensure we run the correct version of Texel, i.e. the one that is associated with the project you just set up.

```sh
npm run start
```

This will open the browser to [localhost:9966](#) and start a development server. Now, when you edit and save the `src/index.js`, `src/style.css` and `app/index.html` files, the page will reload the changes automatically.

You can use modern JavaScript and CSS syntax in your source code, including `import` statements to split your application into many files and bring in JS/CSS dependencies from [npm](https://www.npmjs.com/package/). Texel will handle all the transpiling/bundling behind the scenes.

## `bundle` – Building for Production

When you are ready to release your site, simply run the following command to generate a static web page:

```sh
npm run bundle
```

This will write `bundle.js` (all your JavaScript) and `main.css` (all your CSS) into the `app/` folder. It will be optimized, transpiled and compressed for faster loading and cross-browser support.

Now you can ZIP the `app/` folder and upload it to your favourite hosting service, such as [Neocities](https://neocities.org/). For other ways of publishing a web page, see the [Publishing your first website](#) guide.