Giter Site home page Giter Site logo

rajeakshay / webdevelopment Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 7.24 MB

CS5610 Web Development (Summer 2016): Developing MEAN stack applications that are dynamic, data driven and interactive.

Home Page: http://webdev-amraje.rhcloud.com/

License: MIT License

HTML 38.76% JavaScript 51.46% Shell 5.39% CSS 4.40%

webdevelopment's Introduction

CS5610 Web Development (Summer 2016) GitHub license

Developing MEAN stack applications that are dynamic, data driven and interactive - http://webdev-amraje.rhcloud.com/

Disclaimer -
This repository is no longer actively maintained and supported. Flickr, Google and Facebook change their APIs regularly. Test the code locally before deploying to Redhat Openshift PaaS. Please read LICENSE.md before proceeding. The source code is designed to work for node, npm and MongoDB versions listed below.

RedHat Openshift Online application details:
URL: http://webdev-amraje.rhcloud.com/
node version: v4.4.4
npm version: v2.15.1
MongoDB Community Edition version: v3.2.6

How to clone and host this project/application in RedHat Openshift Online?

  1. Using Openshift Web Console, create an application and install nodejs-0.10 cartridge provided by Openshift. Node.js version will be updated later using configuration code in .openshift directory.

  2. Navigate to the application's dashboard in Openshift Web Console, go to Or, see the entire list of cartridges you can add, paste the URL below in Install your own cartridge textbox at the bottom of the page and click Next.

     https://raw.githubusercontent.com/icflorescu/openshift-cartridge-mongodb/master/metadata/manifest.yml
    

This will install a cartridge with latest version of MongoDB Community Edition. Note that this cartridge is bare-bones and provides mongod daemon with WiredTiger storage engine only. mongo shell and other goodies are not available and are not needed. 3. The URL to your application's Openshift Git repository can be found on Openshift Web Console's application dashboard. It looks something like ssh://[email protected]/~/git/appName.git. In your terminal, git clone the WebDevelopment repository and add your application's Openshift Git repository as a remote repository.

    git clone https://github.com/rajeakshay/WebDevelopment.git
    git remote add openshift ssh://[email protected]/~/git/appName.git
  1. By default, nodejs cartridge will be updated with Node.js version 4.4.4. To specify another version of Node.js, edit the .openshift/markers/NODEJS_VERSION file. Commit any changes using git commit -a -m "<YOUR MESSAGE>".

  2. For all third-party API calls to work, (eg. Flickr Image Search, Youtube Data API, Google OAuth, Facebook OAuth and PassportJS Login strategy), you will need to set custom environment variables with the rhc command line tool as shown:

     For PassportJS login strategy -
     
     rhc env set SESSION_SECRET=<Paste anything you like> -a <Paste your appName here> 
     
     For assignment application -
     
     rhc env set FLICKR_API_KEY=<Paste your Flickr API Key here> -a <Paste your appName here> 
     rhc env set FB_A_CLIENT_ID=<Paste your Facebook App Client ID here> -a <Paste your appName here> 
     rhc env set FB_A_CLIENT_SECRET=<Paste your Facebook App Client Secret here> -a <Paste your appName here> 
     rhc env set FB_A_CALLBACK_URL=<Paste your Facebook OAuth callback URL here> -a <Paste your appName here> 
     
     For project application -
     
     rhc env set YOUTUBE_API_KEY=<Paste your Youtube Data API v3 Key here> -a <Paste your appName here> 
     rhc env set FB_P_CLIENT_ID=<Paste your Facebook App Client ID here> -a <Paste your appName here> 
     rhc env set FB_P_CLIENT_SECRET=<Paste your Facebook App Client Secret here> -a <Paste your appName here> 
     rhc env set FB_P_CALLBACK_URL=<Paste your Facebook OAuth callback URL here> -a <Paste your appName here> 
     rhc env set G_P_CLIENT_ID=<Paste your Google OAuth Client ID here> -a <Paste your appName here> 
     rhc env set G_P_CLIENT_SECRET=<Paste your Google OAuth Client Secret here> -a <Paste your appName here> 
     rhc env set G_P_CALLBACK_URL=<Paste your Google OAuth callback URL here> -a <Paste your appName here> 
    

Prior to setting the above you will need to obtain all API Keys, OAuth Client IDs and should also set proper callback URLS in the developer console of Facebook and Google.

  1. For the first time, force push the code from your local repository to the application's Openshift Git repository.

     git push openshift master -f
    

Force push is required because nodejs-0.10 cartridge provides a default starter code which should be overwritten. Normal git push will show merge conflicts and fail.
After force push, you should see messages stating that Node.js version 4.4.4 or your specified Node.js version is being installed among others. For example -

    ....
    remote:   - Checking to see if Node.js version 4.4.4 is installed ...
    ....
    remote: CLIENT_RESULT: MongoDB started.
    ....
    remote: Git Post-Receive Result: success
    remote: Activation status: success
    remote: Deployment completed with status: success
    ....
  1. Open appName-yourUserName.rhcloud.com in a browser and check if the project/application is working correctly.

Developing and testing locally

  1. Install Node.js v4.4.4 LTS or your desired Node.js version and latest version of MongoDB Community Edition. For best results, use the same version of Node.js and MongoDB that you have configured on Openshift. Verify your installation using following commands-

     node --version
     npm --version
     mongod --version
    
  2. In a terminal, start MongoDB daemon using mongod. You will see a message like -

     ....
     2016-05-12T11:07:23.641-0400 I NETWORK  [initandlisten] waiting for connections on port 27017
    
  3. In another terminal, navigate to the directory where you have cloned this repository. If you haven't yet cloned this repository, simply give the following command -

     git clone https://github.com/rajeakshay/WebDevelopment.git
    
  4. Navigate to the project directory WebDevelopment and install required node modules using command npm install.

  5. For all third-party API calls to work, (eg. Flickr Image Search, Youtube Data API, Google OAuth, Facebook OAuth and PassportJS Login strategy), you will need to set the following custom environment variables either on the command line or in your IDE:

     For PassportJS login strategy -  
     
     SESSION_SECRET=<Set this to anything you like>  
     
     For assignment application -  
     
     FLICKR_API_KEY=<Paste your Flickr API Key here>  
     FB_A_CLIENT_ID=<Paste your Facebook App Client ID here>  
     FB_A_CLIENT_SECRET=<Paste your Facebook App Client Secret here>  
     FB_A_CALLBACK_URL=<Paste your Facebook OAuth callback URL here>  
     
     For project application -
     
     YOUTUBE_API_KEY=<Paste your Youtube Data API v3 Key here>  
     FB_P_CLIENT_ID=<Paste your Facebook App Client ID here>  
     FB_P_CLIENT_SECRET=<Paste your Facebook App Client Secret here>  
     FB_P_CALLBACK_URL=<Paste your Facebook OAuth callback URL here>  
     G_P_CLIENT_ID=<Paste your Google OAuth Client ID here>  
     G_P_CLIENT_SECRET=<Paste your Google OAuth Client Secret here>  
     G_P_CALLBACK_URL=<Paste your Google OAuth callback URL here>  
    

Prior to setting the above you will need to obtain all API Keys, OAuth Client IDs and should also set proper callback URLS in the developer console of Facebook and Google.

  1. From inside the project directory, run the server using command node server.js.
  2. Open http://localhost:3000 in your browser and test the application.
  3. To modify code in an IDE, first set a run configuration stating node interpreter and the start up script as server.js. Set the environment variables listed above if your IDE supports it. Follow your particular IDE's documentation for step-by-step instructions on how to specify run configurations for Node.js projects.

Contributing

I'll be more than happy to look into any bugs or improvement suggestions. Please send me a pull request.

License

This project is released under MIT License. You are free to modify, distribute, copy or sublicense this project. For the full text of the license, see LICENSE.md.

Acknowledgements

Prof. Annunziato's web-dev-template, which is designed specifically for CS5610, provided the base template of this repository.

Configuration code sourced from ramr's excellent work here, provided the base for installing custom version of Node.js (v4.4.4 LTS) on RedHat's Openshift PaaS. (See .openshift directory)

Cartridge with the latest version of MongoDB Community Edition was installed on RedHat's Openshift PaaS thanks to icflorescu's openshift-cartridge-mongodb.

webdevelopment's People

Contributors

rajeakshay avatar jannunzi avatar

Watchers

 avatar

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.