88 lines
2.1 KiB
Markdown
88 lines
2.1 KiB
Markdown
# Getting Started with XTerminal
|
|
|
|
## Installation
|
|
|
|
Below are some of the ways `XTerminal` can be installed;
|
|
|
|
- [CDN](./installation.md#using-cdn) - (for development with a simple setup)
|
|
- [NPM](./installation.md#using-npm) - (use this if you are using bundlers or having a build step)
|
|
|
|
### Production Builds
|
|
|
|
There are two production ready builds:
|
|
|
|
- `xterminal.umd.js` - for the browser (no build tools), it's minified
|
|
- `xterminal.esm.js` - in case of build tools like [Vite](https://vitejs.dev) or Webpack
|
|
|
|
## Using NPM
|
|
|
|
[NPM](https://npmjs.org) is a popular javascript package manager on which [XTerminal](https://npmjs.org/xterminal) is a public npm package that can be installed by anyone.
|
|
|
|
To install it, run one of the following commands;
|
|
|
|
::: code-group
|
|
|
|
```sh [npm]
|
|
npm install xterminal
|
|
```
|
|
|
|
```sh [pnpm]
|
|
pnpm add xterminal
|
|
```
|
|
|
|
```sh [yarn]
|
|
yarn add xterminal
|
|
```
|
|
|
|
:::
|
|
|
|
It provides a production build of the latest release from it's [GitHub repository](https://github.com/henryhale/xterminal/).
|
|
|
|
**Usage**
|
|
|
|
First include the styles in your markup:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="./node_modules/xterminal/dist/xterminal.css">
|
|
```
|
|
|
|
Then import the script into your application (ESM build by default).
|
|
|
|
```js
|
|
import XTerminal from 'xterminal';
|
|
|
|
console.log(XTerminal.version);
|
|
```
|
|
|
|
## Using CDN
|
|
|
|
You can use any CDN that serves npm packages;
|
|
|
|
Install via CDN using one of the following;
|
|
|
|
::: code-group
|
|
|
|
```html [unpkg]
|
|
<link rel="stylesheet" href="https://unpkg.com/xterminal/dist/xterminal.css">
|
|
<script src="https://unpkg.com/xterminal/dist/xterminal.umd.js"></script>
|
|
```
|
|
|
|
```html [jsdelivr]
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterminal/dist/xterminal.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/xterminal/dist/xterminal.umd.js"></script>
|
|
```
|
|
|
|
:::
|
|
|
|
Including `XTerminal` javascript file defines a global property `window.XTerminal` on the `window` object. This implies that the `XTerminal` class is globally accessible.
|
|
|
|
```js
|
|
console.log(XTerminal.version);
|
|
//or
|
|
console.log(window.XTerminal.version);
|
|
```
|
|
|
|
## Next Step
|
|
|
|
Now that you have installed `XTerminal`, it is time to dive into the essential parts.
|