import {Meta} from '@storybook/addon-docs/blocks';

import {LinkStyle} from '../../theme/link.mdx';

<LinkStyle />

<Meta title="Introduction/Installation" />

# Installation

To easily create your PWA presentation it is suggested you create your slides using the CLI and the starter kit as described in the <LinkTo className="link" kind="introduction-getting-started--page">previous chapter</LinkTo>, so you can enjoy all the features.

However, the [DeckDeckGo] core component could be installed in any project too.

If you wish to do so, use it directly in your project via a CDN. Use a simple script and include, or install it from [npm](https://www.npmjs.com/package/@deckdeckgo/core).

> Installing the core component as displayed below will "only" install the "engine" of [DeckDeckGo] respectively, its core doesn't contain any slides.
>
> Splitting the core and the templates allows you to minimize dependencies and, the amount of external code required in your project. Doing this gives the best performance while running the presentation upfront.

## Table of contents

- [Using DeckDeckGo from a CDN](#app-installation-using-deckdeckgo-from-a-cdn)
- [Install DeckDeckGo from npm](#app-installation-install-deckdeckgo-from-npm)
- [Framework integration](#app-installation-framework-integration)

## Using DeckDeckGo from a CDN

It's recommended to use [unpkg](https://unpkg.com/) as a CDN for the [DeckDeckGo] core. To do so, add the following include script in the main HTML file of your project:

```
<script type="module" src="https://unpkg.com/@deckdeckgo/core@latest/dist/deckdeckgo/deckdeckgo.esm.js"></script>
```

## Install DeckDeckGo from NPM

Install [DeckDeckGo] in your project from [npm](https://www.npmjs.com/package/@deckdeckgo/core) using the following command:

```bash
npm install @deckdeckgo/core
```

## Framework integration

The [Stencil documentation](https://stenciljs.com/docs/overview) provides examples of framework integration for [Angular](https://stenciljs.com/docs/angular), [React](https://stenciljs.com/docs/react), [Vue](https://stenciljs.com/docs/vue) and [Ember](https://stenciljs.com/docs/ember).

That being said, commonly, you might either `import` or `load` the component:

### Import

```
import '@deckdeckgo/core';
```

### Loader

```
import { defineCustomElements as deckDeckGoElements } from '@deckdeckgo/core/dist/loader';
deckDeckGoElements();
```

[deckdeckgo]: https://deckdeckgo.com
