Ember Octane Workshop: Shlack

This is the project used for the Mike North's Ember Octane course, where we build a chat app together step-by-step

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js
• Yarn
• Ember CLI
• Brave, Firefox or Chrome

Getting Set Up

There are a few things you need to ensure you have installed, in order to be ready for this course.

Node.js

You’ll need a relatively recent version (v10.0 or newer ideally) of Node.js installed. On OS X, a great way of doing this without disturbing your existing dev environment is to install NVM.

Install & Update Script

Follow the NVM installation instruction to get set up. Installation instructions are here. If you are installing NVM for the first time, but sure to check your terminal for further instructions.

You’ll know everything is set up properly when you can run:

nvm --version # might look like "0.34.0"
node --version # might look like "v10.15.3"

Ember-CLI

Ember-CLI is the official Ember.js build tool. It handles things like:

• Running a development web server
• Running tests
• Code generation
• Compiling static assets

We can install ember-cli globally by running

npm install -g ember-cli

Now you should be able to run

ember --version

and see something like

# NOTE: your version numbers may be different. This is fine!
ember-cli: 3.10.0
node: 11.6.0
os: darwin x64

Visual Studio Code

Particularly if you’ve never tried it before, you should install Microsoft Visual Studio Code. Some fantastic extensions that I use regularly include

• ESlint
• Ember-CLI in Visual Studio Code
• Ember Language Server

Clone the Project

git clone [email protected]:mike-north/ember-octane-workshop.git shlack

Install dependencies

cd shlack
yarn install

Start the development server

ember serve

• Visit your app at http://localhost:4200
  • You will see a Congratulations message if the app is correctly spun up
• Visit your tests at http://localhost:4200/tests
• Your app runs on localhost :4200 by default. You can customize this via --port <port-number>

Code Generators

Make use of the many built-in Ember-CLI generators to get files that follow the latest practices (with matching tests_. To see available generators, run ember help generate

Running Tests

You may ues either of the following two commands to run the entire test suite:

• ember test
• ember test --server

Linting

• yarn lint:hbs
• yarn lint:js
• yarn lint:js --fix

Building

Depending on whether you want an un-minified development build or a minified production build (takes longer, but results in smaller file sizes) you may run either of the following

• ember build # development
• ember build --environment production # production

Troubleshooting

• Be sure your watchman is up-to-date by running brew install watchman or follow the documentation embercli

Further Reading / Useful Links

• ember.js
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox

How this starting point was created

We could create a new Ember app by running the following command (you don't need to run this):

ember new <app-name>

This would create a project based on the default Ember.js app blueprint.

If we want to create an Ember Octane app, Ember Octane being the newest version of Ember.js, we can use the official Ember Octane blueprint instead by running:

ember new -b @ember/octane-app-blueprint <app-name>

This workshop project is basically a new ember app, with the following packages pre-installed for your convenience:

• ember-cli-tailwind
• ember-on-modifier
• ember-cli-pretender

ember install ember-cli-tailwind ember-on-modifier ember-cli-pretender

Added the files in the server folder, and the db.json to provide a development JSON API, and created the notes folder and markdown files inside it.

Thank You!

A lot of people helped in incredibly significant ways to make this curriculum possible. Special thanks to the following people for going way above and beyond

Project Reviews & Refactors

Lisa Huang-North - LinkedIn | GitHub | Twitter

Comprehensive review, usability and “newcomer acceptance testing”

John Robinson ( LinkedIn | GitHub | Twitter )

Semantic HTML, a11y

Robert Jackson - LinkedIn | GitHub | Twitter

Ember Core Review

Chris Garret - LinkedIn | GitHub | Twitter

Ember Core Review

Curriculum

Shankar Sridhar - LinkedIn | GitHub

Huge contributions to the workshop notes

Starting Point HTML/CSS

Adam Wathan ( LinkedIn | GitHub | Twitter )

Used his HTML/CSS to make this workshop’s starting point

Legal

© 2019 LinkedIn

Licensing

The code in this project is licensed as BSD-2-Clause license, and the written content in the ./notes folder is licensed under CC-BY-NC 2.0