whtouche / ng2-auth0-starter

Starter kit for Angular 2 applications using Auth0, webpack, and an Express server and MongoDB back end with full CRUD functionality

Angular 2 Auth0 Express MongoDB CRUD Starter

This repo uses Angular 2 Beta 3.

Prerequisites

Before getting started you will need the following things:

• MongoDB
• Node.js / NPM
• An Auth0 account (they're free)

I assume if you've found your way here you at least have the first two already taken care of.

Getting Started

Go to Auth0 and create a new application

The information you need can be found under the "Settings" tab after you create a new app - it will look like this:

Add your Auth0 account information to the following files:

Auth0.json

• secret = Client Secret
• audience = Client ID

app.ts

• On the "lock = new Auth0Lock" line, add your 'Client ID' and 'Domain'

Install the dependencies:

$ npm install

Compile the TypeScript into JavaScript and create the bundle:

$ npm run build

In separate terminal windows, run the mongo daemon, start the Express server, and start the webpack-dev-server:

$ mongod
$ npm run serve
$ npm start

Navigate to http://localhost:3000/

Contributing

Do you want to help? That would be great - this is still a work in progress. Check out the issues, there are definitely some things that I haven't figured out yet. Pull requests are welcome and encouraged.

Acknowledgements

This project owes a ton to Ajden Towfeek, please check out his YouTube channel for some of the best instructional videos on Angular 2 that I have found:

• https://www.youtube.com/channel/UCDS3sAwfomuOa0hRvd9De7A
• https://github.com/ajtowf
• https://twitter.com/ajtowf
• https://www.pluralsight.com/authors/ajden-towfeek

License

WTFPL

ng2-auth0-starter's Issues

As a developer, I want this starter kit to have 100% test coverage

Maintaining 100% test coverage on your project can be more effort than it is worth, but since this is meant to be a starter kit I would love to start everyone off with 100% coverage.

Accomplishing this goal is going to require learning a lot more about testing Angular 2 than I currently know (see #2) - any help would be appreciated.

As a developer, I don't want todoService.getTodos() in todo.service.spec.ts to return undefined

The way I have structured the test for TodoService is not correct and returns undefined instead of a list of todos.

As a developer, I want to keep my components small by using external templates

If template strings had syntax highlighting and emmet support I would feel better about not using external templates (keeping everything together in javascript / typescript files, ala React) but ¯_(ツ)_/¯

Also, Angular CLI seems to favor the use of external template files, so it makes sense to fall in line behind the standard.

As a developer, I want to integrate a css framework to make styling easier

Probably angular2-material. Maybe bootstrap?

As a user, when creating a new todo, I want it to show up in the list without having to refresh the page

When creating a new todo, the new item is successfully posted to the database, but does not show up on the list until the page is refreshed.

Steps to reproduce:

1. Navigate to the main page
2. Type a new todo into the box and click "Add Todo" or hit enter

ER: The list is updated with the new todo
AR: The todo is successfully posted to the database, but the list is not updated until the page is refreshed.

As a developer, I want this repo to have no vestigial files or references

I'm sure there are some files floating around here that are no longer used, or dependencies listed in the package.json that are no longer depended on. Spring cleaning!

.gitignore could probably stand to be updated (speculation)

As a developer, I don't want to have to open three separate terminal windows to run the application

Currently to run the application you have to open separate terminal windows for the mongo daemon, express server, and webpack-dev-server.

Is this a use case for Docker? I just started a Pluralsight course on Docker and it seems like the answer is maybe, but I admit I don't know enough to know, yet.

As a user, I want to have access to full CRUD functionality

Currently the express / mongo back end has end points to support full crud functionality for todos, but the user can only create and delete todos through the UI. Full CRUD functionality is a high priority item for me to be able to consider this a "complete" starter kit.