Merge pull request #60 from ciatph/dev

v1.1.2

Author: ciatph

.dockerignore

@@ -0,0 +1,8 @@
+.git
+.gitignore
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+.env
+/server/.env

.github/workflows/release.yml

@@ -118,8 +118,8 @@ jobs:
           cp client/.env.example client/.env
           cp server/.env.example server/.env
       - name: Set release version number
-        run: sed -i -e "s/latest/${{ github.event.release.tag_name }}/g" docker-compose.prod.yml
+        run: sed -i -e "s/latest/${{ github.event.release.tag_name }}/g" docker-compose.app.yml
       - name: Build Images
-        run: docker-compose -f docker-compose.prod.yml build
+        run: docker-compose -f docker-compose.app.yml build
       - name: Push Images to Docker Hub
-        run: docker-compose -f docker-compose.prod.yml push
+        run: docker-compose -f docker-compose.app.yml push

Dockerfile.app

@@ -0,0 +1,44 @@
+# BASE PROFILE
+FROM node:14.19.3-alpine AS base
+RUN adduser -S appuser
+
+# BASE SERVER
+FROM base as base-server
+RUN mkdir -p /opt/server
+WORKDIR /opt/server
+RUN chown -R appuser /opt/server
+COPY ./server/package*.json ./
+
+# BASE CLIENT
+FROM base as base-client
+RUN mkdir -p /opt/client
+WORKDIR /opt/client
+RUN chown -R appuser /opt/client
+COPY ./client/package*.json ./
+
+# BUILD CLIENT WEBSITE TARGET
+FROM base-client as builder-client
+RUN npm install
+COPY ./client ./
+RUN npm run build
+
+# BUILD API DOCUMENTATION
+FROM base-server as builder-server
+RUN npm install && npm cache clean --force
+COPY ./server .
+RUN npm run build
+
+# PRODUCTION CLIENT+SERVER PROFILE TARGET
+# Express backend running on pm2
+# Create React App (CRA) served from backend's static directory (using express.static() middleware)
+# Requirements: Disable CORS to allow Same Origin headers on client and server APIs
+FROM base-server as production
+ENV NODE_ENV production
+RUN npm ci --only=production && npm cache clean --force
+RUN npm install [email protected] -g
+COPY ./server .
+COPY --from=builder-server /opt/server/public/docs ./public/docs
+COPY --from=builder-client /opt/client/build ./public
+USER appuser
+EXPOSE 3001
+CMD ["pm2-runtime", "process.json"]

README.md

@@ -11,9 +11,10 @@ A basic web app client in the **/client** directory will show basic API usage an
 - [Usage](#usage)
 - [Available Scripts - server](#available-scripts---server)
 - [Installation and Usage Using Docker](#installation-and-usage-using-docker)
+  - [Docker Dependencies](#docker-dependencies)
   - [Docker for Localhost Development](#docker-for-localhost-development)
   - [Docker for Production Deployment](#docker-for-production-deployment)
-   - [Pre-built Server Docker Image](#pre-built-server-docker-image)
+- [Pre-built Server Docker Image](#pre-built-server-docker-image)
 - [References](#references)
 
 ## Requirements
@@ -50,9 +51,10 @@ A basic web app client in the **/client** directory will show basic API usage an
    | --- | --- |
    |FIREBASE_SERVICE_ACC| The project's private key file contents, condensed into one line and minus all whitespace characters.<br><br>The service account JSON file is generated from the Firebase project's **Project Settings** page, on **Project Settings** -> **Service accounts** -> **Generate new private key**|
    |FIREBASE_PRIVATE_KEY| The `private_key` entry from the service account JSON file.<br> <blockquote> **NOTE:** Take note to make sure that the value starts and ends with a double-quote on WINDOWS OS localhost. Some systems may or may not require the double-quotes (i.e., Ubuntu running on heroku).</blockquote> |
-   |ALLOWED_ORIGINS|IP/domain origins in comma-separated values that are allowed to access the API. Include `http://localhost:3000` by default to allow CORS access to the `/client` app.|
+   |ALLOWED_ORIGINS|IP/domain origins in comma-separated values that are allowed to access the API if `ALLOW_CORS=1`. Include `http://localhost:3000` by default to allow CORS access to the `/client` app.|
    |EMAIL_WHITELIST| Comma-separated email addresses linked to Firebase Auth UserRecords that are not allowed to be deleted or updated (write-protected)<br><br>Default value is `[email protected]`|
-   |ALLOW_CORS|Allow Cross-Origin Resource Sharing (CORS) on the API endpoints.<br><br>Default value is `1`. Setting to `0` will make all endpoints accept requests from all domains, including Postman.|
+   |ALLOW_CORS|Allow Cross-Origin Resource Sharing (CORS) on the API endpoints.<br><br>Default value is `1`, allowing access to domains listed in `ALLOWED_ORIGINS`. Setting to `0` will make all endpoints accept requests from all domains, including Postman.|
+   |ALLOW_AUTH|Restrict access to the `POST`, `PATCH` and `DELETE` API endpoints by allowing signed-in Firebase user Bearer Authorization (Firebase token) checking.<br><br>Retrieve the signed-in Firebase token by signing in a user using the Firebase Web JS SDK `signInWithEmailAndPassword()` method, then retrieve the latest token value using `getIdTokenResult()`.<br><br>Default value is `1`. Setting to `0` will disable Bearer Authorization checking on the listed API endpoints.|
 
 ### client
 
@@ -140,6 +142,14 @@ Copies the built `/client` website from `/client/build` to the server's root dir
 
 We can use Docker to run dockerized **client** and **server** apps for local development. 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 versions as needed.
+
+1. Ubuntu 20.04 (Host)
+2. Docker version 20.10.17, build 100c701
+3. Docker Compose version v2.6.0
+
 ### Docker for Localhost Development
 
 1. Set-up the environment variables and firebase configuration file for the **/client** app.
@@ -164,51 +174,85 @@ We can use Docker to run dockerized **client** and **server** apps for local dev
 
 ### Docker for Production Deployment
 
-The following docker-compose commands build small client and server images targeted for creating optimized dockerized apps running on self-managed production servers. Hot reload is not available when editing source codes from `/client/src` or `/server/src`.
+#### Option #1 - Client and Server as (2) Separate Images and Services
+
+The following docker-compose commands build small `client` and `server` images targeted for creating optimized dockerized apps running on self-managed production servers. An **Nginx** service serves the frontend `client` on port `3000`. The `server`, running on a separate **Nodejs (pm2)** service, is also served by the client's Nginx service in a reverse proxy on port `3001`.  Hot reload is not available when editing source codes from `/client/src` or `/server/src`.
 
 1. Install and set up the required **client** and **server** environment variables as with the required variables on [**Docker for Localhost Development**](#docker-for-localhost-development).
 2. Build the client and server docker services for production deployment.  
    - `docker-compose -f docker-compose-prod.yml build`
-3. At this point, we can opt to push the docker images to a docker registry of your choice. (Requires sign-in to the selected docker registry).
-   - `docker-compose -f docker-compose-prod.yml push`
-4. Create and start the client and server containers.  
-`docker-compose -f docker-compose-prod.yml up`
-5. Run a script in the container to create the default `[email protected]` account, if it does not yet exist in the Firestore database.  
-   `docker exec -it server-prod npm run seed`
-6. Launch the dockerized (prod) client app on  
+3. Create and start the containers.  
+   - `docker-compose -f docker-compose-prod.yml up`
+4. Run a script in the container to create the default `[email protected]` account, if it does not yet exist in the Firestore database.  
+   - `docker exec -it server-prod npm run seed`
+5. Launch the dockerized (prod) client app on  
+`http://localhost:3000`
+6. Launch the dockerized (prod) server app's API documentation on  
+`http://localhost:3001/docs`
+7. Stop and remove containers, networks, images and volumes:  
+   - `docker-compose -f docker-compose-prod.yml down`
+   
+#### Option #2 - Client and Server Bundled in (1) Image and Service
+
+The following docker-compose commands build a small `server` image targeted for creating an optimized dockerized Express app running on self-managed production servers. The frontend `client` is served in an a static directory using the Express static middleware.  
+
+1. Install and set up the required **client** and **server** environment variables as with the required variables on [**Docker for Localhost Development**](#docker-for-localhost-development).
+   - > **INFO:** This build method requires CORS checking dissabled, since the client and server will run on the same port (3001).   
+     > - Disable CORS by setting `ALLOW_CORS=0` in the **.env** file to avoid `Same Origin` errors.  
+2. Build the client and server docker services for production deployment.  
+   - `docker-compose -f docker-compose-app.yml build`
+3. Create and start the containers.  
+   - `docker-compose -f docker-compose-app.yml up`
+4. Run a script in the container to create the default `[email protected]` account, if it does not yet exist in the Firestore database.  
+   - `docker exec -it firebase-users-admin-app npm run seed`
+5. Launch the dockerized (prod) client + server app on  
 `http://localhost:3000`
-7. Launch the dockerized (prod) server app's API documentation on  
+6. Launch the dockerized (prod) client + server app API documentation on  
 `http://localhost:3001/docs`
-8. Stop and remove containers, networks, images and volumes:  
-`docker-compose -f docker-compose-prod.yml down`
+7. Stop and remove containers, networks, images and volumes:  
+   - `docker-compose -f docker-compose-app.yml down`
 
 ## Pre-built Server Docker Image
 
-**firebase-users-admin**'s `server` component is available as a stand-alone docker image on Docker Hub with customizable environment variables (.env file).
+The `server` component of **firebase-users-admin** is available as a stand-alone docker image on Docker Hub with customizable environment variables (.env file).
 
-1. Pull the (production) **/server** docker image from Docker Hub.  
-   `docker pull ciatphdev/firebase-users-admin-server:v1.1.1`
+The server also serves the pre-built `client` website from a static directory using the `express.static()` middleware, following the build instructions from [**Option #2 - Client and Server Bundled in (1) Image and Service**](#option-2---client-and-server-bundled-in-1-image-and-service).
+
+### Steps
+
+1. Pull the (production) **/server** [docker image](https://hub.docker.com/repository/docker/ciatphdev/firebase-users-admin-app) from Docker Hub.  
+   `docker pull ciatphdev/firebase-users-admin-app:v1.1.2`
 2. Create a `.env` file.  
    - Read [**Installation - server #3**](#server) for more information.
-   - Replace the variables accordingly in the `.env` file.
+   - Replace the variables accordingly in the `.env` file. Set `ALLOW_CORS=0` to allow `Same Origin` requests. Read [**Option #2 - Client and Server Bundled in (1) Image and Service**](#option-2---client-and-server-bundled-in-1-image-and-service) for more information.
       ```
       ALLOWED_ORIGINS=http://localhost,http://localhost:3000,http://mywebsite.com,http://yourwebsite.com
       FIREBASE_SERVICE_ACC=YOUR-FIREBASE-PROJ-SERVICE-ACCOUNT-JSON-CREDENTIALS-ONE-LINER-NO-SPACES
       FIREBASE_PRIVATE_KEY=PRIVATE-KEY-FROM-FIREBASE-SERVICE-ACCOUNT-JSON-WITH-DOUBLE-QUOTES
       [email protected]
-	  ALLOW_CORS=1
+	  ALLOW_CORS=0
+	  ALLOW_AUTH=1
       ```
 3. Run the image.
    ```
    docker run -it --rm \
-      --env-file .env
+      --env-file .env \
       -p 3001:3001 \
-      ciatphdev/firebase-users-admin-server:v1.1.1
+      ciatphdev/firebase-users-admin-app:v1.1.2
    ```
 4. Run a script in the container to create the default `[email protected]` account, if it does not yet exist in the Firestore database.  
-   `docker exec -it server-prod npm run seed`
+   `docker exec -it firebase-users-admin-app npm run seed`
 5. Launch the server API documentation on  
 `http://localhost:3001/docs`
+6. Launch the client website on `http://localhost:3001`.
+   - Login using the superadmin account create on step # 4.  
+      ```
+	  username: [email protected]
+	  password: 123456789
+	  ```
+   - Test the API routes by creating new accounts, editing or deleting existing accounts.
+   - The signed-in user's Firebase Auth token is available on the **Home** page (http://localhost:3001/)
+
 
 
 ## References

client/.dockerignore

@@ -1,5 +1,6 @@
 .git
 .gitignore
 node_modules
+npm-debug.log
 Dockerfile
 .dockerignore

client/nginx/nginx.full.conf

@@ -62,9 +62,9 @@ server {
   gzip_types text/plain application/javascript text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;
 
   # Reverse proxy to the client website
-  # Requires the client service running on http://localhost:3000 (from a container or manually installed on host) 
+  # Requires the client service running on http://<MACHINE_PRIVATE_IP>:3000 (from a container or manually installed on host) 
   location / {
-    proxy_pass http://localhost:3000;
+    proxy_pass http://<MACHINE_PRIVATE_IP>:3000;
     proxy_set_header Host $host;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;
@@ -79,9 +79,9 @@ server {
   }
 
   # Reverse proxy to the backend API server
-  # Requires the backend service running on http://localhost:3001 (from a container or manually installed on host) 
+  # Requires the backend service running on http://<MACHINE_PRIVATE_IP>:3001 (from a container or manually installed on host) 
   location /api {
-    proxy_pass http://localhost:3001;
+    proxy_pass http://<MACHINE_PRIVATE_IP>:3001;
     proxy_set_header Host $host;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;

client/src/.eslintrc.js

@@ -29,7 +29,7 @@ module.exports = {
     quotes: ['error', 'single'],
     semi: ['error', 'never'],
     'no-unused-vars': 'off',
-    'no-undef': 'off',
-    'no-console': 2
+    'no-undef': 'off'
+    // 'no-console': 2
   }
 }

client/src/containers/updateuser/index.js

@@ -13,7 +13,7 @@ const defaultLoadingState = {
 
 function UpdateUserContainer () {
   const location = useLocation()
-  const [state, setState] = useState(location?.state || defaultState)
+  const [state, setState] = useState(location.state ? { ...location.state, password: '' } : defaultState)
   const [loading, setLoading] = useState(defaultLoadingState)
 
   const onInputChange = (e) => {

docker-compose.app.yml

@@ -0,0 +1,27 @@
+# Builds the server and client in (1) image:
+# - Express backend that restarts itself on errors running on pm2
+# - Create React App (CRA) client served from a static directory (using express.static() middleware)
+# Requirements: Disable CORS to allow Same Origin headers on client and server APIs
+version: "3"
+services:
+  # Built Create React App (CRA) website running on nginx
+  firebase-users-admin-app:
+    container_name: firebase-users-admin-app
+    image: ciatphdev/firebase-users-admin-app:latest
+    restart: always
+    env_file:
+      - ./server/.env
+      - ./client/.env
+    build:
+      context: .
+      dockerfile: Dockerfile.app
+      target: production
+    networks:
+      - firebase-users-admin-app
+    ports:
+      - "3001:3001"
+
+networks:
+  firebase-users-admin-app:
+    name: firebase-users-admin-app
+    external: false

docker-compose.dev.yml

@@ -10,6 +10,8 @@ services:
       context: ./client
       dockerfile: Dockerfile
       target: development
+    networks:
+      - firebase-users-admin-dev
     volumes:
       - ./client/public:/opt/client/public
       - ./client/src:/opt/client/src
@@ -26,7 +28,14 @@ services:
       context: ./server
       dockerfile: Dockerfile
       target: development
+    networks:
+      - firebase-users-admin-dev
     volumes:
       - ./server/src:/opt/server/src
     ports:
       - "3001:3001"
+
+networks:
+  firebase-users-admin-dev:
+    name: firebase-users-admin-dev
+    external: false