Static Site Deployment

Sidenote: This assumes that user has firebase and heroku installed and has accounts for both services. And assumes that you have the server and client files.

These instructions will lead you through how to deploy a full stack website with a client deployed on Firebase and a server on Heroku.

1. Client (Front-end) Instructions

1. Change into your client directory, where your client app files live.

Firebase Project

1. Initialize a new project

$ firebase init

• The terminal will prompt "What Firebase CLI features do you want to setup for this folder?" Both database and hosting are pre-selected. Unselect the database option by hitting the space bar, leave hosting option selected, and press enter.

• Select [create a new project] and hit enter.

• "What do you want to use as your project directory?"

  • (public) will be pre-populated.
  • Hit enter. This will create a public folder.

• "Configure as a single page app (rewrite all urls to /index.html)"?

  • No

1. In the new public folder, delete the index.html
2. Move all previous files into the public folder
3. Firebase Initialization is complete! Now go to the Firebase Console and click "Create New Project".
4. Once the project has been created, type firebase use --add in the terminal and select the project name you just created.

• "What do you want to use as an alias for this project?" Type an alias and hit enter.

1. Deploy:

$ firebase deploy

1. Once the site has been deployed, the terminal will list the hosting URL. Copy and paste the URL and check out your first deployed static site!

Made changes to your client?

1. Make sure you redeploy to firebase if you make any changes to the client app files.

---

2. Server (Back-end) Instructions

1. ** To avoid merge conflicts with github, move outside of client app git repository and then proceed **

2. Create a server directory

3. Change into the new directory practice-server

If this is your first time deploying to Heroku from the command line

1. Sign up for an account on Heroku.

2. In the command line, install the Heroku CLI tools

$ brew install heroku/brew/heroku

1. Authorize your computer to have access to your Heroku account

$ heroku login

Heroku uses Git to track files, so:

1. Initialize the repo

$ git init

1. Go to github.com and create a new repo
2. Add that repo as a git remote

git remote add origin [url]

1. git add, commit and push all files

Heroku Project

1. Create a Heroku Project

$ heroku create

1. Confirm you have a heroku remote by running:

$ git remote -v

1. Deploy by pushing to Heroku

$ git push heroku master

Made changes to your server?

Re-deploy:

1. git add, commit and push to Github
2. Push to Heroku

$ git push heroku master

---

3. Connect the Client & Server

Now both the front-end and back-end are deployed

1. In the original repo: deploy-doughnuts

• ** change into the practice-client folder ** from your command line
• Update the src/main.js file to do a fetch request to the deployed server
• Re-deploy your firebase client