Code Monkey home page Code Monkey logo

cactus's Introduction

logo

cactus

Cactus App

See the Flamelink Docs

Dev Runtime Environment

Node

You must use node version == 10.18.1.

See Firebase Runtime Environments for more information

Installing Dependencies

You can install the suggested version using the bash script in the root of this repo:

# From project root
. node-version.sh

NOTE: Don't forget the leading period in the script, otherwise your current version of node won't get updated in your current terminal session This will install correct version via Node Version Manager. If you do not have NVM installed yet, the script will install it for you.

Development

Run npm run dev from the /web directory to run the local dev server. It will run webpack-dev-server and launch a server on localhost:8080. Static assets (images) are served out of the /src/assets directory. The dev server supports hot reloading of javascript and sass files.

Since static assets (images, etc) are served from the src directory, all changes should be available immediately

This project uses TypeScript. All new javascript files should be added as .ts (not .js). .js files will no longer compile.

Animating with GSAP & ScrollMagic

ScrollMagic Docs GSAP Docs

Frontend Environment Variables (Config)

At build time, we inject environment variables into a config file: src/scripts/config.ts. The values here should begin and end with double underscores as they are replaced by webpack at build-time. Example parameter is __MY_PARAM__. In the config.ts file, we declare these variables so that typescript doesn't complain about them. We can then leverage any of of these variables at runtime by importing the config file.

To add a new variable, upadte all three config files located in /web/webpack. There is a config for prod, stage, and dev.

Deployments

Run npm run deploy:stage or npm run deploy:prod. Configuration in firestore.json has a predeploy hook that runs the npm script to build the assets needed.

The pre-deployment hook (npm run predeploy) has 3 steps:

  1. clean the output directory (/public), i.e. delete all files from this directory
  2. copy static assets from /src/assets into the output directory, maintaining the subdirectory structure
  3. build javascript and css assets via webpack (npm run build). Webpack outputs the built files into the output directory (/public). Files generated from webpack have the hash of the contents of the file in it's name to help with caching on the CDN.

Once the pre-deployment step completes, all the contents of the /public directory is uploaded to firebase and your changes will be live.

Deployment Build Script

There is a special webpack config file called webpack.deploy.config.js that reads the environment variable GCLOUD_PROJECT, which the firebase CLI provides at runtime for the current project (usually set with the -P flag, or uses the default foudn in .firebaserc). The webpack script then checks if the projectID is equal to prod or stage, and returns the appropriate webpack config (webpack.config.prod or webpack.config.stage). If the environment flag GCLOUD_PROJECT is not present at runtime, the program crashes.

If you want to test the build script for stage or prod manually, you can run npm run predeploy:stage or npm predeploy:prod to force the projectID environment variable.

Analytics

Apparently, universal analytics has been replaced by google tag script. See here for documentation on events: https://developers.google.com/analytics/devguides/collection/gtagjs/events

Admin Credentials

If you need programmatic access to admin credentials, please let Neil know. This is used if you need to run things in the /scripts directory. The credentials file is stored in 1password and should be saved as a file named applicationCredentials_prod.json and applicationCredentials_stage.json in the root of this project. This file should NEVER be checked into source control (the above filename is listed in gitignore).

Helpful Scripts

GIT Cleanup Branches

if you want to clean up your local list of branches that have been deleted from the remote repo you can run these commands

#first, do a dry run
git remote prune origin --dry-run 
#if you are happy with the results, just remove --dry-run to actually execute it
git remote prune origin

if you have a number of branches checkout out locally, you can clean up the ones that have already been merged by using this command

git branch --merged master | grep -v '^[ *]*master$' | xargs git branch -d 

cactus's People

Contributors

neilpoulin avatar rochers avatar katieb avatar chroto avatar

Stargazers

Meril avatar

Watchers

 avatar James Cloos avatar  avatar

Forkers

st-patrick

cactus's Issues

Grammarly breaks CSS layout when enabled

This commit (c9d39e3) disables Grammarly extension for that field in Chrome. A longer-term solution is to figure out what it is injecting into our markup and work around it. For now, logging an issue.

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.