• 

• 

• 

Ship It

Set sail on a sea of love 'Ship It' is the hilariously unethical platform for shipping your friends with each other

Made with ♥ by Dilara Soylu, Maya Pogrebinsky and Deb Banerji

Finalist, Home Depot Codeathlon 2017

Setup

Dependencies

In order to build the project, you will need both Node.js and the Node Package Manager (which can be installed alongside Node.js).

You will also need the Angular CLI which can be installed through npm by running the following command:

npm install -g @angular/cli

Using -g will install the command line interface globally, allowing you to use the ng command, which is required to run the development server, as well as build the project.

After you have installed npm, run npm install in order to install the remaining dependencies.

Firebase Setup

In order to run the project, you will need to create a Firebase project from the Firebase console You will also need to enable Google authentication. You can also alter the code if you want to use another sign in provider. Note that if you are running the application anywhere other than localhost you will need to allow login from other URLS through the Firebase Console.

Then fill out src/app/config/firebase-config.ts according to the credentials taken from the Firebase console. You can get the config object by clicking "Add Firebase to your web app"

The contents of the file should look similar to this:

export const config = {
  apiKey: 'YOUR_API_KEY_HERE',
  authDomain: 'YOUR_AUTH_DOMAIN_HERE',
  databaseURL: 'YOUR_DATABASE_URL_HERE',
  projectId: 'YOUR_PROJECT_ID_HERE',
  storageBucket: 'YOUR_STORAGE_BUCKET_HERE',
  messagingSenderId: 'YOUR_MESSENGER_SENDER_ID_HERE'
};

Publishing Rules

Realtime Database

The default Firebase realtime database rules are as follows:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

For increased security and performance, it is recommended that you replace these rules with those defined in firebase-database-rules.json.

For faster (albeit less secure) development, you can also replace the rules with:

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

Storage

The default Firebase storage rules are as follows:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

For increased security, it is recommended that you replace these rules with those defined in firebase-storage-rules.

For faster (albeit less secure) development, you can also replace the rules with:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

Starting The Application in a Development Environment

You can start a development server by running npm run develop and navigating to http://localhost:4200/ The app will automatically reload if you change any of the source files. Note that this is simply a wrapper around ng serve.

Building The Application

You can create a production build of the application in the dist folder by running the build npm script:

npm run build

This is a wrapper around the ng build -prod command which creates a production build of the application. It also copies over both a package.json file (for npm) and a server.js file. This server file will run the application on http://localhost:3000/.

You can use npm run messy-build in order to build the application without the production flag, which may be necessary if you are running into errors while building.

If you only want the static files, without the server and package files, you can simply run ng build yourself. If you do this, you can also run node distribution-server.js in order to test the build.

Note: On Windows, you will have to copy over the files in dist-utility-files manually, as the cp command is not supported.

Deploying The Application

If you are deploying the application to a production environment, it is recommended for you to build the application and deploy the static files of the built version (optionally using the 2 files in dist-utility-files).

Using The Angular CLI

You can use the Angular CLI to aid development by running the ng command.

Development server

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

Code scaffolding

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

Build

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.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Further help

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

Other Information

This application was initialized using Angular Firebase Initializer on 9/16/2017, 6:37:07 PM

Made with ♥ by Deb Banerji

Built With

• css
• html
• javascript
• typescript