For more details check here
The steps of running the server and client will be simplified, but for now this is the gist:
Clone the repo with the correct branch and move into the directory
$ git clone -b develop https://github.com/beeman/loopback-angular-admin.git loopback-angular-admin-develop
$ cd loopback-angular-admin-develop
Install the dependencies
$ npm install
Create a 'dotenv' file
$ cp .env.example .env
Start the server with debugging of the boot scripts and INITDB enabled:
$ DEBUG=boot:* INITDB=1 API_URL=http://localhost:3000/api/ npm start
The command above should give you a working version of the app on port 3000 and you should be able to log in using admin@admin.com / admin.
In a separate shell run the following command to start the client
$ npm run dev-client
This should open your browser and after a couple of seconds, when webpack finished building the client, you should be able to log in and have the client out-refresh if you make changes to it.
The goal is to have a starter project which can be used to quickly build an API with a frontend that are easily extended.
This software is not ready for production! It is still being developed and it will change in the future.
 
Deploy an instance on your Heroku account to play around with it!
An alternative way to get it running at Heroku is to install the Heroku Toolbelt and follow these steps:
git clone https://github.com/beeman/loopback-angular-admin.git my-project
cd my-project
heroku apps:create my-project
git push heroku master
After an installation the following users are created:
- Admin user: Email:
admin@admin.com, password:admin - Regular user: Email:
user@user.com:, passworduser
Please note, at this moment there is no difference in permissions for admin users or regular users. This needs to change in the future!
- A LoopBack REST API with authentication enabled built on the LoopBack Generator
- A GUI built with AngularJS based on the Angular Generator
- Angular UI-Router
- JSON-based forms by angular-formly
- Notifications by angular-toasty
- File upload with LoopBack storage services
- Admin template powered by almasaeed2010/AdminLTE
- Markdown Editor with live preview with angular-markdown-editor
- Bunch of useful filters for AngularJS: a8m/angular-filter
- t4t5/sweetalert provided by oitozero/ngSweetAlert
- Automatically growing textarea's by monospaced/angular-elastic
- Social authentication with LoopBack passport
- Multi-language support by rubenv/angular-gettext
- User management
- Loading indicators chieffancypants/angular-loading-bar?
- Permissions on user actions (non-admins cannot access advanced functions)
- permissions on content items (non-admins can only edit own content, etc)
- Detect if API is online HubSpot/offline?
- Map API roles to Narzerus/angular-permission
- Add tests
- Add Dockerfile
- Add Vagrantfile
Installation depends on node/npm with bower installed globally.
$ npm install -g bower
The one-liner install (please create an issue if this one does not work!)
git clone https://github.com/beeman/loopback-angular-admin.git && cd loopback-angular-admin && npm install && grunt serve
git clone https://github.com/beeman/loopback-angular-admin.git
npm install
To run the server you issue the command:
npm start
Or to run it with nodemon (needs nodemon installed globally). This will
automatically restart the server when you change its code:
npm run dev
You can specify the URL to the MongoDB database you want to use with the MONGODB_URL environment variable.
MONGODB_URL="mongodb://localhost:27017/loopback-angular-admin" npm start
Set INITDB to true if you want to load the initial dataset, which creates the admin user. The memory database (default) does this automatically.
INITDB=true MONGODB_URL="mongodb://localhost:27017/loopback-angular-admin" npm start
This also works with the free hosted MongoDB instances at compose.io and mongolab.com!
WARNING: Most models don't have an ACL configured. This means that anyone with access to the API can edit most of it's content.
To access models with access control enable you need an AccessToken. You can get an access token by logging in to the API.
To ease development you can create an AccessToken while starting the server by setting the DEV_ACCESS_TOKEN environment variable.
DEV_ACCESS_TOKEN=MySecretToken npm run dev
If you want to share your work through a Pull Request, be sure to make it a clean branch (one functionality per PR) and base it off master.
If you plan on making a big change or replace a core function with something else it is probably best to first open an issue to discuss it with me. This will enhance the chance of the eventual changes getting merged a lot :)
The API is built with generator-loopback.
The GUI is built with generator-angular but is no longer compatible due to refactoring the project into modules.
These should help you quickly add code to your project. Further details tailored to this project might follow in the future.
$ node_modules/.bin/karma start client/test/karma.conf.js
INFO [karma]: Karma v0.12.31 server started at http://localhost:8080/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Linux)]: Connected on socket aLJmRuSNUH2rPfpWgS3l with id 89641972
PhantomJS 1.9.8 (Linux): Executed 1 of 1 SUCCESS (0.007 secs / 0.029 secs)
These commits might be useful when extending the functionality.
At this moment there is no integration for socket.io or websockets, nor will there be in the near future. Once LoopBack has integrated support for it we will leverage from that.
Having that said, it's certainly possible to integrate socket.io, check this pull request by @movibe.
Here are some projects that are related to what this project does. Please send a PR or create an issue if you have any additions to this list.
If you have any problems please contact me. Make sure you mention the branch you are working with!