A web application starter template, created in Node.js with the Express framework. Allows users to login with their Google accounts (via OAuth). Interfaces with a Google Cloud Firestore database.
This application requires a Node.js development environment:
- Node.js
- Git
For beginners, here are some instructions for how to set up your local Node.js development environment.
For students looking for more context about the frameworks and tools used, feel free to consult this Express App Exercise, which walks you through the process of creating an Express.js app from scratch.
Make a copy of this template repo (as necessary). Clone your copy of the repo onto your local machine. Navigate there from the command-line:
cd ~/Desktop/express-template-2022Install Packages:
npm installInstall the "nodemon" development server that saves time during development:
npm install nodemon -gThis app requires a few services, for user authentication and data storage. Follow the instructions below to setup these services.
Visit the Google Cloud Console. Create a new project, and name it. After it is created, select it from the project selection dropdown menu.
Visit the API Credentials page for your Google Cloud project. Click the button with the plus icon to "Create Credentials", and choose "Create OAuth Client Id".
Click to "Configure Consent Screen". Leave the domain info blank, and leave the defaults / skip lots of the setup for now. If/when you deploy your app to a production server, you can return to populating this info (or you will be using a different project).
Return to actually creating the "OAuth Client Id". Choose a "Web application" type, give it a name, and set the following "Authorized Redirect URIs" (for now, while the project is still in development):
FORESHADOWING: when we deploy this app to a user-facing production server, we'll need to return to register an additional callback URL, pointing to the server address
After the client is created, note the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET, and set them as environment variables (see configuration section below).
Visit the Google Firebase Console to create a new Firebase project. When you create the project:
- Select the Google Cloud project you just created from the dropdown.
- Enable Google Analytics.
- Configure Google Analytics:
- Choose an existing Google Analytics account or create a new one.
- Automatically create a new property in this account.
Follow this guide to create a Firestore database for the Firebase project you just created. When you create the database, "start in test mode".
Products Collection
After the database has been created, create a new collection called "products" with a number of documents inside. Create each document using an auto-generated "Document Id", as well as the attributes:
name(string)description(string)price(number)url(string)
Populate the "products" documents based on the following examples:
| name | description | price | url |
|---|---|---|---|
| Strawberries | Juicy organic strawberries. | 4.99 | https://picsum.photos/id/1080/360/200 |
| Cup of Tea | An individually-prepared tea or coffee of choice. | 3.49 | https://picsum.photos/id/225/360/200 |
| Textbook | It has all the answers. | 129.99 | https://picsum.photos/id/24/360/200 |
Orders Collection
There will also be an "orders" collection, which will get auto-generated and populated as a result of running the app. It will have the following structure:
user_email(string)product_info(map)order_at(timestamp)
Users Collection
In the future, if you want to store more information about your users, for example their settings, preferences, and activities, you can create a "users" collection and extend this app's functionality as desired.
To fetch data from the Firestore database (and use other Google APIs), the app will need access to a local "service account" credentials file.
From the Google API Credentials page, find the service account created during the Firebase project setup process (it should be called something like "firebase-adminsdk"), or feel free to create a new service account.
For the chosen service account, create new JSON credentials file as necessary from the "Keys" menu, then download the resulting JSON file into the root directory of this repo, specifically named "google-credentials.json".
Obtain a premium AlphaVantage API Key from the professor (i.e. ALPHAVANTAGE_API_KEY).
Create a file called ".env" in the root directory of this repository, and populate it with environment variables to specify your own credentials, as obtained in the "Setup" section above:
# this is the ".env" file...
ALPHAVANTAGE_API_KEY="________"
GOOGLE_CLIENT_ID="______.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET="______"Run the local web server (then visit http://localhost:3000/ in the browser):
npm run start-devSee this Deployment Guide for instructions on how to deploy this app to a public-facing server operated by the Heroku platform.