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

# Quick Start: Texel CLI

This is a quick-start guide for using Texel through its command-line interface. There are three core tasks that Texel provides:

- `texel create` – Used to create a new project or code sketch
- `texel start` – Runs a development server so you can live code
- `texel bundle` – Bundles your JavaScript & CSS so you can publish your website

### Preface: Install Node.js and npm

First, you must install the latest version of Node.js and npm. If you need help, see [How to Install Node.js and npm](#) for details.

## `create` – Project Setup

After you install Node/npm, open your Terminal (command-line) application. Navigate to a new folder that will hold your project, like so:

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

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

Now, we will run 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`).

Texel will also install any dependencies associated with the project, and stub out all the files needed for your application.

> :bulb: See Also: [Installing Texel Globally](#installing-texel-globally)

### Folder Structure

After everything installs, you'll notice some new files/folders were created. Mostly, you can just focus on the following three, which defines the source code for our application:

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

> :bulb: See Also: [Folder Structure Details](#folder-structure-details)

## `start` – Development

To start coding, you can run the following command:

```sh
npm run start
```

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

You will notice that the `src/index.js` already contains some initial code. Thanks to Texel, you can `import` a style sheet from JavaScript, and it will be included in the production CSS file. The initial code looks like this:

```js
// Helps to normalize CSS consistently across browsers
import 'normalize.css';

// You can import local CSS files like so
import './style.css';

// Here you can define any logic for your application
// ...
```

## `bundle` – Building your Website

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.

# More Details

### How to Install Node.js and npm

TODO.

### Folder Structure Details

The default `texel create` command generates the following folder structure:

```sh
my-cool-app/       # Project folder
  app/               # Static site folder
    index.html         # Your HTML
  src/               # Source code
    index.js           # JavaScript code
    style.css          # Main style sheet
  node_modules/      # 3rd party dependencies
  package.json       # npm config
  package-lock.json  # npm config
  .gitignore         # git config
```

This is just one flavour of a _project template_ that Texel supports. Texel can also generate projects that are better suited for GitHub Pages or specific libraries like React.

> :bulb: Generally, it's best practice to use lower case and dash-spacing for project names.

### Installing Texel Globally

If you use Texel a lot, you might want to install it globally rather than relying on `npx`. This way, you can create new projects without re-installing texel.

To do this, use `npm install` with a `--global` flag:

```sh
npm install texel --global
```

Now you should be able to run `texel` globally.

```sh
# Start another project
texel create
```

Make sure to re-install it occasionally to keep up to date with the latest version.

### Using Texel without `create`

In some cases you might already have a project set up, or you may want to use your own folder structure and dependencies instead of relying on a template from Texel.

You can do this by installing `texel` locally in your project folder.

```sh
# if you don't have package.json, generate one
npm init

# now you can install texel locally
# and save it as a development dependency
npm install texel --save-dev
```

Next, you will need to add `npm run` scripts. Edit your `package.json` and ensure it has a "scripts" field like so:

```js
{
  "scripts": {
    "start": "texel start --dir app/ --clean",
    "bundle": "texel bundle --dir app/"
  }
}
```

By default, `texel` will look for your JavaScript source file in the `package.json` "main" field, so ensure it points to your application entry point:

```js
{
  "main": "./src/index.js"
}
```

If you'd like, you can also adjust the settings and flags for the texel commands, such as running it in the current folder, using a different entry point, and ignoring CSS. For example:

```js
{
  "scripts": {
    "start": "texel start index.js --no-css",
    "bundle": "texel bundle index.js --no-css"
  }
}
```

For more command-line variations, see the full [Command-Line Docs](#).