diff options
Diffstat (limited to 'examples/component/README.md')
| -rw-r--r-- | examples/component/README.md | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/examples/component/README.md b/examples/component/README.md new file mode 100644 index 000000000..f51958529 --- /dev/null +++ b/examples/component/README.md @@ -0,0 +1,35 @@ +# Astro Starter Kit: Component Package + +This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM. + +```sh +npm create astro@latest -- --template component +``` + +[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages) +[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages) +[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json) + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +```text +/ +├── index.ts +├── src +│ └── MyComponent.astro +├── tsconfig.json +├── package.json +``` + +The `index.ts` file is the "entry point" for your package. Export your components 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-component-library` in an Astro project to install your components | +| `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) | |