diff --git a/docs/src/pages/basics/guide-ember/index.md b/docs/src/pages/basics/guide-ember/index.md
index 6b424bcaf61d..f3d17167eba3 100644
--- a/docs/src/pages/basics/guide-ember/index.md
+++ b/docs/src/pages/basics/guide-ember/index.md
@@ -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
 
diff --git a/examples/ember-cli/.env b/examples/ember-cli/.env
index 6051734db011..8e8c4cbfc8fc 100644
--- a/examples/ember-cli/.env
+++ b/examples/ember-cli/.env
@@ -1,2 +1 @@
-STORYBOOK_EXAMPLE_APP=true
-STORYBOOK_NAME=ember-example
+STORYBOOK_NAME=ember-example
\ No newline at end of file
diff --git a/examples/ember-cli/.gitignore b/examples/ember-cli/.gitignore
index 964fe8b4e8f3..9f61ffc32c50 100644
--- a/examples/ember-cli/.gitignore
+++ b/examples/ember-cli/.gitignore
@@ -13,3 +13,5 @@ build
 .DS_Store
 npm-debug.log
 tmp
+.env
+.storybook/preview-head.html
diff --git a/examples/ember-cli/.storybook/preview-head.html b/examples/ember-cli/.storybook/preview-head.html
deleted file mode 100644
index 813f2051ae07..000000000000
--- a/examples/ember-cli/.storybook/preview-head.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<meta name="ember-example/config/environment" content="%7B%22modulePrefix%22%3A%22ember-example%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%22ember-example%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-example.css">
-
-<script src="./assets/vendor.js"></script>
-<script>
-  runningTests = true;
-</script>
-<script src="./assets/ember-example.js"></script>
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 55f01c8df5ba..1126bde0c0a6 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -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",
@@ -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",