Skip to content
My portfolio.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Firebase universal portfolio

Themed for

This is an unejected create-react-app project built to be hosted on Firebase with server-side rendering (SSR) performed by Firebase Cloud Functions.

The project is a monorepo with the create-react-app universal code and the server-only code as separate Yarn workspaces. So far deployment has worked fine this way, since Yarn hoists nearly all of the dependencies to /functions, however Babel sometimes has trouble finding its presets & plugins since firebase deploy runs from the root directory above /functions — to fix this, symlinking /node_modules to /functions/node_modules appears to satisfy all the things.


Add the config files with the app's Firebase credentials. Run yarn install from /functions to install dependencies. You can now run yarn dev from /functions to run the entire app locally, or if you don’t need the server you can run yarn start from /functions/app to start just the React app.

Config files

Certain config files are omitted from the git repo which the app needs in order to run.


The access codes that grant access to private portfolio sections.

    "accessCode": "~~~",
    "displayName": "~~~"


CORS rules.

    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600


The credentials the server will use to perform Firebase actions with elevated permissions.

  "type": "service_account",
  "project_id": "~~~",
  "private_key_id": "~~~",
  "private_key": "~~~",
  "client_email": "~~~",
  "client_id": "~~~",
  "auth_uri": "~~~",
  "token_uri": "~~~",
  "auth_provider_x509_cert_url": "",
  "client_x509_cert_url": "~~~"


Firebase client app credentials.

  "apiKey": "~~~",
  "authDomain": "~~~",
  "databaseURL": "~~~",
  "projectId": "~~~",
  "storageBucket": "~~~",
  "messagingSenderId": "~~~"


The SSR architecture here borrows heavily from Patrick Cason’s "Server-side rendering in Create React App".

The icons are from Feather Icons.

You can’t perform that action at this time.