astro/examples/integration/README.md

# Astro Starter Kit: Integration Package

This is a template for an Astro integration. Use this template for writing integrations to use in multiple projects or publish to NPM.

```
npm create astro@latest -- --template integration
```

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/integration)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/integration)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/integration/devcontainer.json)


## 🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

```
/
├── index.ts
├── tsconfig.json
├── package.json
```

The `index.ts` file is the "entry point" for your integration. Export your integration in `index.ts` to make them importable from your package.

## 🧞 Commands
All commands are run from the root of the project, from a terminal:

| Command                | Action                                           |
| :--------------------- | :----------------------------------------------- |
| `npm link`              | Registers this package locally. Run `npm link my-integration` in an Astro project to install your integration
| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser)
Adds an integration starter example (#4877) * adding an integration starter example * chore: linter fixes * removing components from the integration example * removing the monorepo and demo project, adding links to docs and examples * chore: update lock file * typo fix 2022-10-07 16:06:51 +00:00			`# Astro Starter Kit: Integration Package`

			`This is a template for an Astro integration. Use this template for writing integrations to use in multiple projects or publish to NPM.`

			```
			`npm create astro@latest -- --template integration`
			```

			`[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/integration)`
Update open with codesandbox link to use synced sandboxes (#6105) 2023-02-03 17:52:11 +00:00			`[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/integration)`
Enhanced Astro codespace support (#6288) * Enhanced Astro codespace support Enhances the base devcontainer and Dockerfile to provide a smoother development experience out of the box for contributors. Adds a devcontainer per example so that we can add buttons on astro.new that will launch users straight into the appropriate example app. * Cleanup devcontainers and pin base image * Update .devcontainer/example-welcome-message.txt Co-authored-by: Samruddhi Khandale <skhandale@microsoft.com> --------- Co-authored-by: Samruddhi Khandale <skhandale@microsoft.com> 2023-02-23 15:34:37 +00:00			`[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=/.devcontainer/integration/devcontainer.json)`
Adds an integration starter example (#4877) * adding an integration starter example * chore: linter fixes * removing components from the integration example * removing the monorepo and demo project, adding links to docs and examples * chore: update lock file * typo fix 2022-10-07 16:06:51 +00:00

			`## 🚀 Project Structure`

			`Inside of your Astro project, you'll see the following folders and files:`

			```
			`/`
			`├── index.ts`
			`├── tsconfig.json`
			`├── package.json`
			```

			The `index.ts` file is the "entry point" for your integration. Export your integration in `index.ts` to make them importable from your package.

			`## 🧞 Commands`
			`All commands are run from the root of the project, from a terminal:`

			`\| Command \| Action \|`
			`\| :--------------------- \| :----------------------------------------------- \|`
			\| `npm link` \| Registers this package locally. Run `npm link my-integration` in an Astro project to install your integration
			\| `npm publish` \| [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser)