Skip to content

Latest commit

 

History

History
267 lines (211 loc) · 8.59 KB

2_development.md

File metadata and controls

267 lines (211 loc) · 8.59 KB
Raw

Development

Before starting this, ensure you or another developer on your team has gone through the required setup. Each developer will need to follow the steps in this document to set up their machine for development.

1. Install Node.js, npm, and global packages

  1. Download and install Node.js and npm
  2. Install TypeScript and Angular 
    npm install -g typescript angular-cli

2. Install local packages

Clone the repository and run npm install to download all the local dependencies listed in package.json.

3. Copy Google Cloud Platform (GCP) OAuth credentials

These credentials are necessary for the application to authenticate the user with Google Sheets.

  1. Visit the GCP Credentials page and select the OAuth 2.0 Client ID you or another developer on your team created for this project during setup.
  2. Click Download JSON.
  3. Rename the downloaded file to credentials.json and move it to src/server (i.e. you should have a src/server/credentials.json file after this step).

The file will look something like

{
  "web": {
    "client_id": "{YOUR_CLIENT_ID}",
    "project_id": "{YOUR_PROJECT_ID}",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://oauth2.googleapis.com/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_secret": "{SECRET}",
    "redirect_uris": ["http://localhost:8080", "https://other-url.com"],
    "javascript_origins": ["http://localhost:8080", "https://other-url.com"]
  }
}
  1. If you or another developer on your team has not yet updated the CLIENT_ID field in OauthApiService, copy the value from the client_id in the credentials.json file above into the CLIENT_ID field. It will look something like .apps.googleusercontent.com.

4. Create a Firebase service account key

The server uses the Firebase Admin SDK to delete collections of data. The Admin SDK requires a service account key to authenticate the app. To set up this key

  1. Log in to the Firebase console, then click the gear icon and select Project settings.
  2. Click the Service accounts tab.
  3. Click the Generate new private key button and then Generate key.
  4. Rename the downloaded file to service_account_key.json and move to src/server ((i.e. you should have a src/server/service_account_key.json file after this step).

The file will look something like

{
  "type": "service_account",
  "project_id": "{YOUR_PROJECT_ID}",
  "private_key_id": "{YOUR_PRIVATE_KEY_ID}",
  "private_key": "-----BEGIN PRIVATE KEY-----{YOUR_PRIVATE_KEY}-----END PRIVATE KEY-----\n",
  "client_email": "{YOUR_CLIENT_EMAIL}",
  "client_id": "{YOUR_CLIENT_ID}",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "{YOUR_URL}"
}

5. Set up environment.ts

  1. Log in to the Firebase console, then click the gear icon and select Project settings.
  2. Under *Your apps, copy the object named firebaseConfig.
  3. In environment.ts, add a new firebase key to the environment const and set its value to the object you just copied.

The file will look something like

export const environment = {
  production: false,
  firebase: {
    apiKey: '{YOUR_API_KEY}',
    authDomain: 'yourproject.firebaseapp.com',
    databaseURL: 'https://yourproject.firebaseio.com',
    projectId: '{YOUR_PROJECT_ID}',
    storageBucket: 'undefined',
    messagingSenderId: '{YOUR_MESSAGING_SENDER_ID}',
    appId: '{YOUR_APP_ID}',
    measurementId: '{YOUR_MEASUREMENT_ID}',
  },
};

If you set up a production-specific Firebase project in setup, you'll want to do the same as above, but copy the object into environment.prod.ts.

6. Configure the server

The server expects a build/config/server_config.json to read the necessary server-side credentials.

To create this file, run

npm run setup-server

This creates the build/server/ and build/config/ directories, and copies over the server config template to build/config/server_config.json. You'll have to update this config to reflect your project settings.

The required fields are:

  • port: The port to run the server on. You'll want to make sure that this port is the same as the target port in proxy.conf.js (currently set to 3000)
  • staticPath: The directory for the static JavaScript files (typically dist/harassment-manager)
  • googleCloudApiKey: Your Google Cloud project API key. Note that this should be the server-side key created in setup in GCP Credentials
  • cloudProjectId: Your Google Cloud project ID
  • twitterApiCredentials: Your credentials for the Twitter APIs. For Enterprise Full-Archive search, Twitter will provide you with the credentials. All other API credentials should be available on the Twitter Developer Portal under "Keys and Tokens" for your app and project.

All together, your config should look something like one of the two configs below, with the relevant credentials and key values replaced.

If using the Enteprise Full-Archive Search API:

{
  "port": "3000",
  "staticPath": "dist/harassment-manager",
  "googleCloudApiKey": "{YOUR_GOOGLE_CLOUD_API_KEY}",
  "cloudProjectId": "{YOUR_GOOGLE_CLOUD_PROJECTID}",
  "twitterApiCredentials": {
    "accountName": "{TWITTER_API_ACCOUNT_NAME}",
    "username": "{TWITTER_API_USERNAME}",
    "password": "{TWITTER_API_PASSWORD}",
    "appKey": "{TWITTER_APP_KEY}",
    "appToken": "{TWITTER_APP_TOKEN}",
    "useEssentialOrElevatedV2": false
  }
}

If using the v2 Full-Archive Search endpoint:

{
  "port": "3000",
  "staticPath": "dist/harassment-manager",
  "googleCloudApiKey": "{YOUR_GOOGLE_CLOUD_API_KEY}",
  "cloudProjectId": "{YOUR_GOOGLE_CLOUD_PROJECTID}",
  "twitterApiCredentials": {
    "appKey": "{TWITTER_APP_KEY}",
    "appToken": "{TWITTER_APP_TOKEN}",
    "bearerToken": "{TWITTER_APP_BEARER_TOKEN}",
    "useEssentialOrElevatedV2": false
  }
}

If using the v2 Essential or Elevated API:

{
  "port": "3000",
  "staticPath": "dist/harassment-manager",
  "googleCloudApiKey": "{YOUR_GOOGLE_CLOUD_API_KEY}",
  "cloudProjectId": "{YOUR_GOOGLE_CLOUD_PROJECTID}",
  "twitterApiCredentials": {
    "appKey": "{TWITTER_APP_KEY}",
    "appToken": "{TWITTER_APP_TOKEN}",
    "bearerToken": "{TWITTER_APP_BEARER_TOKEN}",
    "useEssentialOrElevatedV2": true
  }
}

7. (Optional) Enable Google Analytics

If you created a Google Analytics property in setup and want to enable analytics in the application,

  1. Find your measurement or tracking ID
  2. Open index.html and copy the ID into "YOUR_ANALYTICS_ID_GOES_HERE".

8. Run the app

All npm commands are defined in package.json.

Manually build and run the app

To build and run the app and a local development server, run

npm run build:all:dev && npm run start:dev-server

To build and run the app and a local production server, run

npm run build:all:prod && npm run start:prod-server

Navigate to http://localhost:8080 to load the app. Note that this command starts the server on the port specified in build/server/server_config.json.

Automatically rebuild and run the app

To rebuild the app and server automatically, run:

npm run develop

Testing

To test the app, run:

npm run test

Pushing code

We maintain a CircleCI configuration in config.yml to build, lint, and test the app whenever a change is pushed to this GitHub repository. You can choose to use the same configuration for your own CircleCI setup if you'd like or remove the configuration in favor of another CI solution or none at all.