Skip to content

Commit

Permalink
Merge pull request #65 from weaponsforge/dev
Browse files Browse the repository at this point in the history
v1.0.0
  • Loading branch information
weaponsforge authored Mar 3, 2023
2 parents c4ca23e + 5e9af23 commit 1261503
Show file tree
Hide file tree
Showing 73 changed files with 10,545 additions and 0 deletions.
6 changes: 6 additions & 0 deletions .dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.git
.gitignore
node_modules
npm-debug.log
Dockerfile
.dockerignore
68 changes: 68 additions & 0 deletions .github/workflows/deploy-dev.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
name: Deploy to Firebase Hosting

# This workflow deploys the static-generated nextjs app to Firebase Hosting
# Triggered by push to the "dev" branch
on:
push:
branches:
- dev

jobs:
lint-export-client:
name: Lint and Export client
runs-on: ubuntu-latest
env:
NEXT_PUBLIC_BASE_PATH: ''
NEXT_PUBLIC_FIREBASE_WEB_API_KEY: ${{ secrets.FIREBASE_WEB_API_KEY_DEV }}
NEXT_PUBLIC_FIREBASE_WEB_AUTHDOMAIN: ${{ secrets.FIREBASE_WEB_AUTHDOMAIN_DEV }}
NEXT_PUBLIC_FIREBASE_WEB_PROJECT_ID: ${{ secrets.FIREBASE_WEB_PROJECT_ID_DEV }}
NEXT_PUBLIC_FIREBASE_WEB_STORAGE_BUCKET: ${{ secrets.FIREBASE_WEB_STORAGE_BUCKET_DEV }}
NEXT_PUBLIC_FIREBASE_WEB_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_WEB_MESSAGING_SENDER_ID_DEV }}
NEXT_PUBLIC_FIREBASE_WEB_APP_ID: ${{ secrets.FIREBASE_WEB_APP_ID_DEV }}
NEXT_PUBLIC_FIREBASE_WEB_MEASUREMENT_ID: ${{ secrets.FIREBASE_WEB_MEASUREMENT_ID_DEV }}
NEXT_PUBLIC_MEDIA_BG1: ${{ secrets.NEXT_PUBLIC_MEDIA_BG1 }}
steps:
- name: Checkout the repository
uses: actions/checkout@v3
- name: Use NodeJS v18.14.2
uses: actions/setup-node@v3
with:
node-version: 18.14.2
- name: Install Dependencies
run: |
cd client
npm install
- name: Lint
run: |
cd client
npm run lint
- name: Export static files
run: |
cd client
npm run export
mv out/404/index.html out/404.html
- name: Archive Development Artifact
uses: actions/upload-artifact@v3
with:
name: dev-out
path: |
client/out
client/.firebaserc
client/firebase.json
retention-days: 3

deploy-client:
name: Deploy Client to Firebase Hosting
needs: lint-export-client
runs-on: ubuntu-latest
steps:
- name: Download Artifact
uses: actions/download-artifact@v3
with:
name: dev-out
- name: Deploy to Firebase
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting:dev
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
44 changes: 44 additions & 0 deletions .github/workflows/lint.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
name: Lint Files

# This workflow lints the client and server directories
# And will trigger on push *any* branch
on:
push:
branches-ignore:
- master
- dev

jobs:
lint-client:
name: Lint Client
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@v3

- name: Use NodeJS v18.14.2
uses: actions/setup-node@v3
with:
node-version: 18.14.2

- name: Install Dependencies and Lint
run: |
cd client
npm install
npm run lint
lint-server:
name: Lint Server
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@v3
- name: Use NodeJS v18.14.2
uses: actions/setup-node@v3
with:
node-version: 18.14.2
- name: Install Dependencies and lint
run: |
cd server
npm install
npm run lint
77 changes: 77 additions & 0 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
name: Deploy to Production Environment

# This workflow will trigger on any tag/release created on *any* branch
# Make sure to create tags/releases only from the "master" branch for consistency
on:
release:
types: [published]

jobs:
lint-client:
name: Lint and Export client
runs-on: ubuntu-latest
env:
NEXT_PUBLIC_BASE_PATH: ${{ secrets.NEXT_PUBLIC_BASE_PATH }}
BASE_API_URL: ${{ secrets.BASE_API_URL }}
NEXT_PUBLIC_FIREBASE_WEB_API_KEY: ${{ secrets.FIREBASE_WEB_API_KEY_PROD }}
NEXT_PUBLIC_FIREBASE_WEB_AUTHDOMAIN: ${{ secrets.FIREBASE_WEB_AUTHDOMAIN_PROD }}
NEXT_PUBLIC_FIREBASE_WEB_PROJECT_ID: ${{ secrets.FIREBASE_WEB_PROJECT_ID_PROD }}
NEXT_PUBLIC_FIREBASE_WEB_STORAGE_BUCKET: ${{ secrets.FIREBASE_WEB_STORAGE_BUCKET_PROD }}
NEXT_PUBLIC_FIREBASE_WEB_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_WEB_MESSAGING_SENDER_ID_PROD }}
NEXT_PUBLIC_FIREBASE_WEB_APP_ID: ${{ secrets.FIREBASE_WEB_APP_ID_PROD }}
NEXT_PUBLIC_FIREBASE_WEB_MEASUREMENT_ID: ${{ secrets.FIREBASE_WEB_MEASUREMENT_ID_PROD }}
NEXT_PUBLIC_MEDIA_BG1: ${{ secrets.NEXT_PUBLIC_MEDIA_BG1 }}
steps:
- name: Checkout the repository
uses: actions/checkout@v3
- name: Use NodeJS v18.14.2
uses: actions/setup-node@v3
with:
node-version: 18.14.2
- name: Install Dependencies
run: |
cd client
npm install
- name: Lint Client
run: |
cd client
npm run lint
- name: Export static files
run: |
cd client
npm run export
mv out/404/index.html out/404.html
- name: Disable Jekyll
run: |
cd client
touch out/.nojekyll
- name: Archive Development Artifact
uses: actions/upload-artifact@v3
with:
name: main-out
path: client/out
retention-days: 3

deploy-client:
name: Deploy client to Github Pages
needs: lint-client
runs-on: ubuntu-latest
steps:
- name: Download Artifact
uses: actions/download-artifact@v3
with:
name: main-out

- name: List files for publish
run: ls -l -a

- name: Deploy to Github Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./
publish_branch: gh-pages
91 changes: 91 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,100 @@ My Phonebook will consist of a front-end website (client) and a secure REST API

> This project will also serve as a practice for catching up and implementing best practices for using React, Firebase, Express and general software development.
### Live Preview

https://weaponsforge.github.io/my-phonebook/

## Software Documentation

- [project plan v1.0](/project-plan.pdf)

## Requirements

The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.

1. Windows 64-bit OS
2. nvm version 1.1.9 (for Windows)
- > **NOTE:** Using nvm is optional if you want to continue using your pre-installed NodeJS.
3. NodeJS LTS v18.14.2 installed using nvm
- node v18.14.2
- npm v9.5.0
- >**NOTE:** We will use v18.14.2 for the official production client and server builds but feel free to use other NodeJS versions by setting `"engine-strict=false"` in the `.npmrc` file when working on localhost development as needed, but please use **v18.14.2** when installing new modules. Do not commit the package.json or package-lock.json files should they change when `"engine-strict=false"`.
### Core Libraries and Frameworks

1. Client app
- NextJS 13.2.1
- React 18.2.0
- Firebase 9.17.1
2. Server app
- Express 4.18.2

## Manual Installation

1. Clone this repository.<br>
`https://github.com/weaponsforge/my-phonebook.git`

2. Follow the instructions on the **README** files inside the `/client` and `/server` directories for more information on configuring and using the client and backend.

## Installation Using Docker

We can use Docker to run dockerized client and server apps for local development and production mode. The following methods require Docker and Docker compose correctly installed and set up on your development machine.

### Docker Dependencies

The following dependencies are used to build and run the image. Please feel feel free to use other OS and versions as needed.

1. Ubuntu 22.04.1
2. Docker version 23.0.1, build a5eeb1
3. Docker Compose v2.16.0

### Docker for Localhost Development

1. Set up the environment variables for the `/client` and `/server` directories like mentioned in the [Manual Installation](#manual-installation) section, step no. 2.
2. Verify that ports 3000 and 3001 are free because the client and server containers will use these ports.
3. Stop current-running my-phonebook containers, if any.
```
docker compose -f docker-compose.dev.yml down
docker compose -f docker-compose.prod.yml up
```
4. Stop and delete all docker instances for a fresh start.
- > **NOTE:** Running this script will delete all docker images, containers, volumes, and networks. Run this script if you feel like everything is piling but do not proceed if you have important work on other running Docker containers.
- ```
sudo chmod u+x scripts/docker-cleanup.sh
./scripts/docker-cleanup.sh
# Answer all proceeding prompts
```
5. Edit any of the files under the `/client` or `/server` directory after running step no. 2.2 and wait for their live reload on `http://localhost:3000` (client) and `http://localhost:3001` (server).
```
# 2.1. Build the client and server containers for localhost development.
docker compose -f docker-compose.dev.yml build

# 2.2. Create and start the development client and server containers
docker compose -f docker-compose.dev.yml up

# 2.3. Stop and remove the development containers, networks, images and volumes
docker compose -f docker-compose.dev.yml down
```
### Docker for Production Deployment
The following docker-compose commands build a small client image targeted for creating optimized dockerized apps running on self-managed production servers. An Nginx service serves the frontend client on port 3000. Hot reload is NOT available when editing source codes from the `/client` and `/server` directories.
1. Follow step numbers 1 - 4 in the [Docker for Localhost Development](#docker-for-localhost-development) section.
2. Build the client and server containers for production deployment.<br>
- > **NOTE:** Run this step only once or as needed when housekeeping docker images or if there are new source code updates in the **/client** or **/server** directories.
- `docker compose -f docker-compose.prod.yml build`
3. Load the production mode apps on `http://localhost:3000` (client) and `http://localhost:3001` (server) after running step no. 3.1.
```
# 3.1. Create and start the production client and server containers.
docker compose -f docker-compose.prod.yml up

# 3.2. Stop and remove the production containers, networks, images and volumes
docker compose -f docker-compose.prod.yml down
```
@weaponsforge<br>
20220222
6 changes: 6 additions & 0 deletions client/.dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.git
.gitignore
node_modules
npm-debug.log
Dockerfile
.dockerignore
9 changes: 9 additions & 0 deletions client/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
NEXT_PUBLIC_BASE_PATH=''
NEXT_PUBLIC_FIREBASE_WEB_API_KEY=AIzaSyDIdds0QEYfS_GFbARrAU53AmvxH-HCcRU
NEXT_PUBLIC_FIREBASE_WEB_AUTHDOMAIN=my-phonebook-dev.firebaseapp.com
NEXT_PUBLIC_FIREBASE_WEB_PROJECT_ID=my-phonebook-dev
NEXT_PUBLIC_FIREBASE_WEB_STORAGE_BUCKET=my-phonebook-dev.appspot.com
NEXT_PUBLIC_FIREBASE_WEB_MESSAGING_SENDER_ID=240072530372
NEXT_PUBLIC_FIREBASE_WEB_APP_ID=1:240072530372:web:9bece433da7e2e56b4ec91
NEXT_PUBLIC_FIREBASE_WEB_MEASUREMENT_ID=G-MYW833GXV6
NEXT_PUBLIC_MEDIA_BG1=https://firebasestorage.googleapis.com/v0/b/my-phonebook-pro.appspot.com/o/media%2Fimages%2Fpexels-pixabay-101529.jpg?alt=media&token=24e8132a-8c2e-4c28-bad5-1ab35b82607e
32 changes: 32 additions & 0 deletions client/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel
20 changes: 20 additions & 0 deletions client/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"env": {
"node": true,
"browser": true,
"es6": true
},
"extends": "next/core-web-vitals",
"plugins": [
"eslint-plugin-react", "eslint-plugin-react-hooks"
],
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "never"],
"no-unused-vars": "error",
"no-undef": "error",
"no-console": ["error", { "allow": ["error"] }]
}
}
15 changes: 15 additions & 0 deletions client/.firebaserc
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"projects": {
"default": "my-phonebook-dev"
},
"targets": {
"my-phonebook-dev": {
"hosting": {
"dev": [
"my-phonebook-dev"
]
}
}
},
"etags": {}
}
Loading

0 comments on commit 1261503

Please sign in to comment.