Giter VIP home page Giter VIP logo

express-firebase-template-2022's Introduction

Express.js App Template

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.

screenshot of a page of products

Prerequisites

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.

Repo Setup

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-2022

Install Packages:

npm install

Install the "nodemon" development server that saves time during development:

npm install nodemon -g

Services Setup

This app requires a few services, for user authentication and data storage. Follow the instructions below to setup these services.

Google Cloud Project

Visit the Google Cloud Console. Create a new project, and name it. After it is created, select it from the project selection dropdown menu.

Google OAuth Client

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).

Firebase Project

Visit the Google Firebase Console to create a new Firebase project. When you create the project:

  1. Select the Google Cloud project you just created from the dropdown.
  2. Enable Google Analytics.
  3. Configure Google Analytics:
    1. Choose an existing Google Analytics account or create a new one.
    2. Automatically create a new property in this account.

Firestore Database Setup

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.

Google Cloud Service Account Credentials

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".

AlphaVantage API

Obtain a premium AlphaVantage API Key from the professor (i.e. ALPHAVANTAGE_API_KEY).

Configuration

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="______"

Usage

Run the local web server (then visit http://localhost:3000/ in the browser):

npm run start-dev

Deploying

See this Deployment Guide for instructions on how to deploy this app to a public-facing server operated by the Heroku platform.

express-firebase-template-2022's People

Contributors

s2t2 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

express-firebase-template-2022's Issues

Restore Hosting

We were hosting this on Heroku, but they got rid of their free tier and it doesn't make sense to pay for this demo app, so we need to move to a new hosting provider.

We should create an alternative DEPLOYING.md style document with new instructions to host this app using a different platform like Netlify.

Production Session Storage

Need to update session storage option on production.

Warning: connect.session() MemoryStore is not
Mar 6 12:50:18 PM  designed for a production environment, as it will leak
Mar 6 12:50:18 PM  memory, and will not scale past a single process.

For fix, try cookie session instead:

https://stackoverflow.com/a/59629154

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.