-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4345 from storybooks/shilman/cli-rename
Rename CLI to sb
- Loading branch information
Showing
7 changed files
with
101 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,42 +1,45 @@ | ||
--- | ||
id: 'quick-start-guide' | ||
title: 'Quick Start Guide' | ||
id: "quick-start-guide" | ||
title: "Quick Start Guide" | ||
--- | ||
|
||
Storybook supports many different frontend frameworks with more coming! | ||
Storybook supports many different frontend view layers with more coming! | ||
React, Vue, Angular, Mithril, Marko, HTML and Svelte are currently supported. Follow these steps to get started with Storybook. | ||
|
||
Get started using the automated command line tool. This command adds a set of boilerplate files for Storybook in your project: | ||
|
||
```sh | ||
cd my-project-directory | ||
npm i -g @storybook/cli | ||
getstorybook | ||
npx -p @storybook/cli sb init | ||
``` | ||
The `-g` global install is used to run our cli tool in your project directory to generate templates for existing projects. To avoid the global install and setup a project manually, take a look at the [Slow Start Guide](/basics/slow-start-guide/). | ||
|
||
To install storybook for HTML, add `--html` argument: | ||
The tool inspects your `package.json` to determine which view layer you're using. If you want to develop HTML snippets in storybook, we can't determine that automatically. So to install storybook for HTML, add the `--html` argument: | ||
|
||
``` | ||
getstorybook --html | ||
npx -p @storybook/cli sb init --html | ||
``` | ||
|
||
To setup a project manually, take a look at the [Slow Start Guide](/basics/slow-start-guide/). | ||
|
||
Start Storybook with: | ||
|
||
```sh | ||
npm run storybook | ||
``` | ||
|
||
Storybook should now be available in the browser with a link provided in the console. | ||
|
||
* * * | ||
--- | ||
|
||
To learn more about what `getstorybook` command does, have a look at the slow start guides: | ||
* [React](/basics/guide-react/) | ||
* [Vue](/basics/guide-vue/) | ||
* [Angular](/basics/guide-angular/) | ||
* [Mithril](/basics/guide-mithril/) | ||
* [Marko](/basics/guide-marko/) | ||
* [HTML](/basics/guide-html/) | ||
* [Svelte](/basics/guide-svelte/) | ||
* [Ember](/basics/guide-ember/) | ||
|
||
- [React](/basics/guide-react/) | ||
- [Vue](/basics/guide-vue/) | ||
- [Angular](/basics/guide-angular/) | ||
- [Mithril](/basics/guide-mithril/) | ||
- [Marko](/basics/guide-marko/) | ||
- [HTML](/basics/guide-html/) | ||
- [Svelte](/basics/guide-svelte/) | ||
- [Ember](/basics/guide-ember/) | ||
|
||
A tutorial is also available at [Learn Storybook](https://www.learnstorybook.com) for a step-by-step guide (only available for React). |
Oops, something went wrong.