/TodoListExample

Todo List App using a JsonApiDotNetCore API and an EmberJs client.

Primary LanguageJavaScript

JsonApiDotNetCore Todo List Example

Demo application for JsonApiDotNetCore using Ember.js.

Back in 2017, Jared Nance did an excellent video series in which he built this demo:

Usage

Start the database

The app requires running postgres instance with credentials specified in appsettings.json. One way to do this is run the database in a Docker container:

docker run --name TodoListSampleDb \
    -e POSTGRES_USER=postgres \
    -e POSTGRES_PASSWORD=postgres \
    -e POSTGRES_DB=TodoList \
    -p 5432:5432 \
    -d postgres

Starting the API

  • Switch directory
    • cd TodoListAPI
  • Set the environment to development (mac)
    • export ASPNETCORE_ENVIRONMENT=development
  • Start the server
    • dotnet run

Starting the Client

  • Switch directory

    • cd TodoListClient

  • Install ember-cli

    • npm install -g ember-cli

  • Restore packages

    • npm install -g yarn
    • yarn install

  • Start the client

    • yarn start or
    • ember s

  • Open http://localhost:4200/ in your browser

In case you haven't watched the videos: the default username/password is guest/Guest1!.

Running Client Tests

  • ember test
  • ember test --server

Updating to the latest version of Ember

Usually the following commands are sufficient

  • npm install -g ember-cli-update
  • ember-cli-update
  • ember-cli-update --run-codemods
  • yarn install

Testing if everything still works

  • application starts and displays login link
  • login with invalid username/password shows popup
  • login with correct username/password shows single todo-item "owned-by-guest"
  • input validation: adding a todo-item with less than 4 characters is not possible
  • after adding a todo-item, you're taken back to the list, which includes the new item
  • clicking logout takes you back to the login page
  • navigating to http://localhost:4200/s/todo-items when logged out takes you to the login page