Portfolio - Built version

View the page at eugene-sang.web.app

This is a complied version of the raw portfolio

Technologies

• React
• Firebase
• GitHub
• Node.js
• npm

Prerequisites

• CLI environment

  • Window Command Prompt or Powershell
  • Linux Terminal
  • Mac Terminal

• Firebase account firebase.com

• Firebase active project

• Node.js

  node --v

• npm - bundled with nodejs

  npm --v

Deployment

After creating a web project in firebase,

1. Go to project settings

2. Scroll down to SDK setup and configuration

3. Select the CDN radio button

4. Copy the code provided excluding the script tags

5. Paste that code to script.js

6. Cut your fiebase config to secrets.js and remember to import it in script.js

   export const firebaseConfig = {
       apiKey: "",
       authDomain: "",
       projectId: "",
       storageBucket: "",
       messagingSenderId: "",
       appId: "",
       measurementId: ""
   };

Building React App

We have the source code for our built app at Eugene Sang - Portfolio.

1. Clone the project

   git clone https://github.com/eugenesang/portfolio.git

   or

   download it from github

2. Navigate to the project folder

   cd portfolio

3. Install packages

   npm install

   or

   yarn install

4. Customise your portfolio.

5. Test it in local dev

   npm start

6. If everything works. Everything looks good. Build the app

   npm run build

7. The build version of the app will be in the folder ./build

Preparation of files for deployment

1. Delete everything in this folder except script.js

2. Copy the content of the build folder to this folder.

3. Edit the head of index.html to include

   <script type="module" src="./script.js" defer></script>

4. Test the code using live server

   live-server . --port=8080

5. Use you browser dev tools to test the app.

Deploy to firebase

1. Install the Firebase CLI if you haven't already via npm by running the following command:

   npm install -g firebase-tools

2. Log into Firebase using your Google account by running the following command:

   firebase login

3. Initialize a firebase project and follow the instructions provided. We only need analytics for this app, you may select only that

   firebase init

4. Deploy

   firebase deploy

Note you can get more instructions from firebase official docs

Congratulations! You are now live.