Giter Club home page Giter Club logo

ionic-app-with-nodejs-backend's Introduction

[Really old, don't use] Ionic-app-with-NodeJs-backend

N.B This project is very much a work in progress and I haven't decided where it is going. I couldn't find any projects with backends for Ionic apps (MEAN stack) so I decided to make an app with one.

Things are still pretty messy I.E. files are still included which shouldn't be, and it's pretty embarrassing releasing it now, but I thought there's no harm in putting it out there!

[Ionic] (https://github.com/driftyco/ionic) app with NodeJs Express based on a backend generated by [Angular fullstack generator] (https://github.com/DaftMonk/fullstack-demo)

This project uses MongoDB, so having a database listening on Localhost should be fine.

The backend hasn't changed much from one generated by the fullstack generator, so please do see that project for setting environment variables (such as Facebook client IDs), the MongoDB url etc.

Live Demo

[demo] (http://fullstack.joshhargreav.es)

Quick Start

$ git clone https://github.com/hardgreaves/Ionic-app-with-NodeJs-backend
$ cd fullstack
$ npm install & bower install
$ cordova plugin add org.apache.cordova.inappbrowser
$ gulp build
$ node server/app.js

To build/run the project as a native app run from within the client folder. Note that when built as a native app you should chance apiUrl in the config service to the url of your api server.

  ionic run [Platform]

Notes

This project uses [gulp] (https://github.com/gulpjs/gulp/) along with bower to inject dependencies into www/index.html using the command 'gulp build'. Run gulp sass from within the client folder to generate CSS from the ionic.app.scss file in SCSS. (This will be fixed shortly...)

##Social Login As per the Angular fullstack backend, login via Facebook, google and twitter is implemented backend wise. It should just be a case of setting the environment variables for client urls and using the oauth function in the login controller.

Currently I've used the cordova [in app browser] (https://github.com/apache/cordova-plugin-inappbrowser/) plugin to open a page at http://yourserver.com/auth/facebook (for example). This then redirects to the login page for that provideer, which in turn redirects to /auth/provider/callback which then redirects to the default page with a token as a paramter. The app checks the URL when a 'loadstart' event is fired on the created window, and parses the URL for this token. One this token is obtained, it can be added to the cookies, and request for the user object can be made.

##Styling Style the app in the file in the SCSS folder, and run gulp sass (from client folder)

Contact etc

Please feel to make pull requests, fork the project and direct mesesage me.

ionic-app-with-nodejs-backend's People

Contributors

joshjhargreaves avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

ionic-app-with-nodejs-backend's Issues

Need updated Source/Build - Console shows some error on rebuilding

Below is the error I am getting while following the steps:

Uncaught ReferenceError: describe is not defined
cordova.js:1 Uncaught SyntaxError: Unexpected token <
http://localhost:35729/livereload.js?snipver=1 Failed to load resource: net::ERR_CONNECTION_REFUSED
angular.js:3934 Uncaught Error: [$injector:unpr] Unknown provider: $$cookieReaderProvider <- $$cookieReader <- $cookies <- $cookieStore <- authInterceptor <- $http <- $templateFactory <- $view <- $state
http://errors.angularjs.org/1.2.28/$injector/unpr?p0=%24%24cookieReaderProv…-%20%24http%20%3C-%20%24templateFactory%20%3C-%20%24view%20%3C-%20%24state

Thanks
Saravanan B

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.