Giter VIP home page Giter VIP logo

feenr / mean-hero Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 1.0 285 KB

Boilerplate for creating an application using the MEAN stack using the Tour of Heroes tutorial

License: MIT License

JavaScript 23.96% TypeScript 56.89% CSS 10.36% HTML 8.53% Dockerfile 0.26%
angular heroes-tutorial boilerplate stack mongodb mean-stack material-design angular-material angular6-boilerplate angular6 angular6-sample auth0 heroesofthestorm

mean-hero's Introduction

Build Status

MEAN Hero

Overview

This project serves as the boilerplate for an application using the MEAN stack. I hope to use it for my own personal angular projects, but I think it's also a good start for others looking to introduce themselves to MEAN.

This project takes the result of the Tour Of Heroes angular tutorial and extends it to use Express, Mongo DB, Node.js, Auth0 for Authentication and Heroku for deploying builds. This should make this project a great starting point for developers just getting started with angular.

Much of the project design comes from mean.io. However, it is using Angular version 6, and the latest version of all MEAN dependencies. The ability to use the ng-cli should make extending this boilerplate significantly easier.

Running the sample app

Using angular dev server

// Mongo db should be installed and started. 
> npm install
> npm start
> npm start-ng
// Navigate to http://localhost:4200/

Using an Express server with generated static content

// Mongo db should be installed and started. 
> npm install
> npm build
> npm start
// Navigate to http://localhost:4040/

With Docker

> docker-compose up
// Navigate to http://localhost:4200/

Angular

This project was generated with Angular CLI version 6.0.0.

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Express

  • Express server can be started with node src/server-start.js
  • Once the angular project has been built, it will be hosted automatically by express
  • The heroes API can be found at http://localhost:4040/api/heroes

Mongo DB

  • Default db is named mean
  • Default port is 27017
  • Configuration can be updated in .env

Docker

  • To start a dockerized version of your application, use docker-compose up

Auth0

  • This project uses Auth0 for authentication.

Heroku

  • This project is configured to deploy on Heroku.
  • Latest version can be viewed at this URL https://mean-hero.herokuapp.com/heroes. This may take up to a minute to start up as the app server sleeps after 30 minutes of inactivity

The sample app

Dashboard

image

Hero list

image

Update hero

image

Heroes of the storm data

To make this project a little bit more exciting, I have added the ability to load the database with heroes from Heroes of the Storm. An export of hero data from the game can be generated using this project. The output JSON can be passed as the body for the service localhost:4040/heroes/bulkimport

mean-hero's People

Contributors

feenr avatar

Watchers

 avatar  avatar

Forkers

dakad

mean-hero's Issues

Docker wouldn't expose ng dev server

Currently the dockerfile is not configured to expose the ng dev server, hosted on port 4200. When I tried enabling this I couldn't get it to work for some reason. Exposing port 4040 worked fine for exposing the Express server.

This would be nice to allow new users to develop on a dockerized dev server and not have to install mongo db on their local system, or start up a seperate server.

Hero list is limited to 50, but does not have paging

Describe the bug
The hero list is limited to 50 heroes.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Populate hero list with more than 50 heros.
  2. Go to the hero list page
  3. Only 50 heroes are shown, but no option of paging.

Expected behavior
There should be a way to view more heroes.

Upon logging in, user name doesn't show

Describe the bug
When first logging in to the application, the user name does not show. Refreshing the application causes it to display properly.

To Reproduce
Steps to reproduce the behavior:

  1. From a logged out session
  2. Click log in in the top right corner
  3. Log in
  4. When redirected to the heroes dashboard, note that the user name is not shown in the rop right of the screen.
  5. Refresh the window and take note of how your user name willl start to display.

Search does not function

Search currently does not work. Ideally upon clicking on an entry it would open that heroes page.

Include an authentication example

Describe the solution you'd like
Project should include a way to enable authentication using an authentication service. This is a feature that is expected for most web applications.

Address depencency vulnerabilities

The following dependencies are reported as having vulnerabilities:
cthackers / adm-zip
hapijs / cryptiles
TooTallNate / node-https-proxy-agent https-proxy-agent
get / parsejson
unshiftio / url-parse

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.