simplesNotEZ

JavaScript Front-End-Framework Learning Materials

• Video - Front-End | Face-Off

Vue

• Vue - Documentation
• Vue - Awesome Resources
• Vue - CLI Scaffolding
• Vue - Browser Dev Tools

simplesNotEZ

Set-up github repo for project

-Create a separate repository in github

-Does your project have a package.json yet? If not, create one within your project directory:

$ npm init -y

-Create a .git directory in your project directory:

simplesNotEZ

Set-up express project in folder

separate from any Galvanize forked & cloned project //so that your .git stuff is not mixed up with their .git stuff

1. $ npm init -y

   //creates package.json which allows you to set-up your project dependencies--js libraries for your project

   //create a start script in your package.json: "start": "node app.js"

   //it may also be required to make sure that your "main" a couple lines above is like so: "main": "app.js",

simplesNotEZ

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid

simplesNotEZ

Make sure you have created a github repo for your project. Stage, commit, and push your files and changes to this github repo first. Then, from within the project directory:

1. $ heroku login //put in your credentials to log-in to heroku
2. $ heroku create (app_name) //this should automatically set-up a remote on heroku to push to
3. $ heroku addons:create heroku-postgresql:hobby-dev //this is required when deploying to heroku with a database
4. $ git remote -v

simplesNotEZ

Setting Up New Project with Postgres, Knex, Express

All right, let's start :

-create a new repo on Github

git clone repo

-add a .gitignore and at the very least type in node_modules and .env

simplesNotEZ

2021 Notes:

PREAMBLE: - make sure you have firebase cli installed: npm install -g firebase-tools in order to use the command line

1. Log into firebase and create a project: firebase login
   • create a new firebase project in the firebase GUI in the console, or there will be an option to create it from CL later as an option during firebase init process.
2. Make sure npm isn’t running anything any place in any terminal
3. cd into the root directory of your project and run: firebase init
   • Which Firebase feature do you want to use? Hosting

• Associate this project dir w/ a Firebase project. [ A list of all your projects on Firebase will be output. Arrow down to the project and hit enter. ]

simplesNotEZ

Static Site Deployment

These instructions will lead you through how to deploy a static website on firebase

Instructions

1. Sign up for an account on Firebase.
2. In your terminal, install the Firebase CLI tools. (This also updates you to the latest version of firebase.)

simplesNotEZ

*Publishing react  to firebase*

// Log into firebase and create a project
// Make sure npm isn’t running anything any place in any terminal
// Change to your react app folder
*npm run build*        
// creates a build folder and merges files into a compact build version
*firebase init*              
// select hosting
// select your project

simplesNotEZ

*Publishing Angular  to firebase*

// Log into firebase and create a project
// Make sure npm isn’t running anything any place in any terminal
// Change to your angular app folder. 
//For me, I did the first dino drill in angular, and so I was in the version-1 folder, and my project folder was named drill1angular. So, from the version-1 folder, I typed `cd drill1angular`
*ng build --prod*        
// creates a build folder and merges files into a compact build version.
// Now...cd into your dist/project-folder. Again, I named my project folder drill1angular, and since I was already in version-1/drill1angular, I typed cd dist/drill1angular. _Yes, now there's two project folders named the same thing that are in different places._ Make _sure_ you're in the project folder inside the dist folder. For me, that path was version-1/drill1angular/dist/drill1angular
*firebase init*