Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ember] update ember ergonomics to not require any manual setup #4544

Merged
merged 1 commit into from
Oct 25, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 4 additions & 34 deletions docs/src/pages/basics/guide-ember/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,50 +37,20 @@ npm init

Then add the following NPM script to your package json in order to start the storybook later in this guide:

> In order for your storybook to run properly be sure to be either run `ember serve` or `ember build` before running any storybook commands.
> In order for your storybook to run properly be sure to be either run `ember serve` or `ember build` before running any storybook commands. Running `ember serve` before storybook will enable live reloading.

```json
{
"scripts": {
"storybook": "start-storybook -p 9001 -s dist"
"build-storybook": "ember build & build-storybook -p 9001 -s dist",
"storybook": "ember serve & start-storybook -p 9001 -s dist"
}
}
```

## Setup environment

### Adding preview-head.html

In order for storybook to register your ember application you must add the following file to `.storybook/preview-head.html`

> These scripts may not contain everything you need, a good point of reference is to look at what is in the head tag in your applications `dist/index.html` file when you build.

```
<meta name="{ember-app-name}/config/environment" content="%7B%22modulePrefix%22%3A%22{ember-app-name}%22%2C%22environment%22%3A%22test%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22{ember-app-name}%22%2C%22version%22%3A%224.0.0-alpha.23+4f61a2fb%22%7D%7D" />

<link integrity="" rel="stylesheet" href="./assets/vendor.css">
<link integrity="" rel="stylesheet" href="./assets/{ember-app-name}.css">

<script src="./assets/vendor.js"></script>
<script>
runningTests = true;
</script>
<script src="./assets/{ember-app-name}.js"></script>
```

> Adding the runningTests script is extremely important don't forget to add this as it will result in your application binding multiple times.

Substitute `ember-app-name` with the name of your ember application.

> This is found by going to `package.json` and referencing the name field

### Adding .env

A file named `.env` is needed in the root directory with the following contents:

```
STORYBOOK_NAME={ember-app-name}
```
Your environment will be preconfigured using `ember-cli-storybook`. This will add a `preview-head.html`, a `.env` and make sure that your environment is configured to work with live reload.

## Create the config file

Expand Down
3 changes: 1 addition & 2 deletions examples/ember-cli/.env
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
STORYBOOK_EXAMPLE_APP=true
STORYBOOK_NAME=ember-example
STORYBOOK_NAME=ember-example
2 changes: 2 additions & 0 deletions examples/ember-cli/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,5 @@ build
.DS_Store
npm-debug.log
tmp
.env
.storybook/preview-head.html
10 changes: 0 additions & 10 deletions examples/ember-cli/.storybook/preview-head.html

This file was deleted.

5 changes: 3 additions & 2 deletions examples/ember-cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"private": true,
"scripts": {
"build": "ember build",
"build-storybook": "yarn build && cp -r public/* dist && build-storybook -s dist",
"build-storybook": "yarn build & cp -r public/* dist & build-storybook -s dist",
"dev": "ember serve",
"storybook": "yarn build && start-storybook -p 9009 -s dist, public"
"storybook": "yarn dev --port 4222 & start-storybook -p 9009 -s dist, public"
},
"devDependencies": {
"@babel/core": "^7.1.2",
Expand All @@ -33,6 +33,7 @@
"ember-cli-htmlbars-inline-precompile": "^1.0.5",
"ember-cli-inject-live-reload": "^2.0.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-storybook": "*",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^2.0.0",
"ember-load-initializers": "^1.1.0",
Expand Down