75 lines
3 KiB
Markdown
75 lines
3 KiB
Markdown
# Thinking in Stories: Component-First
|
|
|
|
This is an example Ember app that was the result of live-coding at EmberConf 2022 focusing on Storybook and tests. This code is _not_ intended to deploy in any meaningful capacity and is supplied merely as a reference and playground.
|
|
|
|
This readme explains how to get started with this project as well as lists all links referenced in the conference talk.
|
|
|
|
## Prerequisites
|
|
|
|
You will need the following things properly installed on your computer.
|
|
|
|
* [Git](https://git-scm.com/)
|
|
* [Node.js](https://nodejs.org/) (with npm)
|
|
* [Ember CLI](https://ember-cli.com/)
|
|
|
|
## Installation
|
|
|
|
* `git clone <repository-url>` this repository
|
|
* `cd emberconf-2022`
|
|
* `npm install`
|
|
|
|
## Running / Development
|
|
|
|
### Ember
|
|
|
|
* `ember serve`
|
|
* Visit your app at [http://localhost:4200](http://localhost:4200).
|
|
* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
|
|
|
|
### Storybook
|
|
|
|
* `npm run storybook`
|
|
|
|
### Code Generators
|
|
|
|
Make use of the many generators for code, try `ember help generate` for more details
|
|
|
|
### Running Tests
|
|
|
|
* `ember test`
|
|
* `ember test --server`
|
|
|
|
### Linting
|
|
|
|
* `npm run lint`
|
|
* `npm run lint:fix`
|
|
|
|
### Building
|
|
|
|
* `ember build` (development)
|
|
* `ember build --environment production` (production)
|
|
|
|
## Further Reading / Useful Links
|
|
|
|
* [Author notion doc for talk](https://hergaiety.notion.site/Thinking-in-Stories-Component-First-66c7c795e4864ed0a81fddbf777a6f86) (has abstract, outline, key snippets etc)
|
|
* [Author Portfolio](https://gaiety.me/)
|
|
* [Storybook - What's a Story](https://storybook.js.org/docs/react/get-started/whats-a-story)
|
|
* [Storybook - Install](https://storybook.js.org/docs/ember/get-started/install) (switch to "Ember")
|
|
* [Storybook configuration snippet referenced](https://gitlab.com/-/snippets/2270344) (or see it in this repo under `.storybook/main.js`)
|
|
* [TailwindCSS](https://tailwindcss.com/)
|
|
* [Tailwind UI Contact Card](https://tailwindui.com/components/application-ui/lists/grid-lists) (note, this is behind a paywall and assumes a Tailwind UI subscription)
|
|
* [Ember Template Imports](https://github.com/ember-template-imports/ember-template-imports)
|
|
* [Glint #ember-components](https://github.com/typed-ember/glint#ember-components)
|
|
* [Ember Blueprints](https://cli.emberjs.com/release/advanced-use/blueprints/)
|
|
* [Ember CLI Storybook](https://storybook.js.org/addons/@storybook/ember-cli-storybook)
|
|
|
|
### Standard Ember Links
|
|
|
|
* [ember.js](https://emberjs.com/)
|
|
* [ember-cli](https://ember-cli.com/)
|
|
* Development Browser Extensions
|
|
* [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
|
|
* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
|
|
* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
|
|
* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
|
|
* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
|