Re-coding past projects and deploying websites

Since I have finished with my portfolio, this week I am going back to some of my older projects featured on there and trying to re-work them to be better so I can have an even greater showcase. I have decided to re-work my Sinatra-app ‘Protest Tracker’ into a website that users can post and see upcomming and past shows/concerts in the bay area. This is a good excersize for me as I haven’t coded a Ruby website in a long time since learning JavaScript/React. I hope to get this done by the end of the week and be able to either move onto another project or start a whole new one.

For the technical portion of my blog, I want to talk about deploying your projects to the web since I just recently was able to deploy my portfolio. There are a number of web services that you can use for free to deploy your website for all to see. In the past I used googles Firebase to deploy a single-page JavaScript app that searches for recipes, you can see the website here:

Foodelio

Firebase is a little more challenging to get set-up and deployed, you can find a thorough walk-through here:

Get started with Firebase Hosting | Firebase Documentation

For my portfolio, I opted to deploy through gitpages, GitHubs answer to web deployment. To deploy to GitHub pages, first you need a GitHub account and to install and setup Git to your machine. You can follow this tutorial get Git setup on your machine:

Set up Git - GitHub Docs

Once you have that all setup (assuming you already have Node.js and npm installed on your system) in the command line for your projects root folder type the following to install GitHub pages as a dev-dependency:

npm install gh-pages --save-dev

Next, go into your package.json file in the root folder of your project and add the following properties for homepage to the top after the first bracket. Your homepage will be "http://{github username}.github.io/{repo-name}", so your package.json file should like this:

{
  "homepage": "http://mikeshahin.github.io/portfolio",
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
...

Next, in the scripts section of the package.json file, add the following:

"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

If you haven’t already, create a github repository for your project and push all your code to it, if you already have a repository, push all your changes that you want your deployed site to have. Finally enter this in the command prompt:

npm run deploy

This creates a branch named gh-pages that will host your app. You can go view your deployed app at the web-address you added to the package.json file earlier.

If later you make changes to your project that you want on your deployed to your webpage, you can simple push your changes to your repository and run the:

npm run deploy

again!