From a1140126657d432e7010bd56fa90eb752e67944b Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Fri, 5 Aug 2022 17:00:22 -0400 Subject: [PATCH 01/11] Removed extraneous files --- index.js | 0 package-lock.json | 6 ------ 2 files changed, 6 deletions(-) delete mode 100644 index.js delete mode 100644 package-lock.json diff --git a/index.js b/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 174e47e..0000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "aliascheck", - "lockfileVersion": 2, - "requires": true, - "packages": {} -} From 1334174ad00724272255f7f45f523c0e1ffbde3c Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Fri, 5 Aug 2022 17:11:43 -0400 Subject: [PATCH 02/11] Removed extraneous files from server and db container image builds References: docker - How to test dockerignore file? - Stack Overflow https://stackoverflow.com/questions/38946683/how-to-test-dockerignore-file https://stackoverflow.com/a/71751097 https://stackoverflow.com/questions/38946683/how-to-test-dockerignore-file/71751097#71751097 docker - Can dockerfile be put in .dockerignore? - Stack Overflow https://stackoverflow.com/questions/47580298/can-dockerfile-be-put-in-dockerignore --- backend/.dockerignore | 5 +++++ backend/app/db/.dockerignore | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 backend/app/db/.dockerignore diff --git a/backend/.dockerignore b/backend/.dockerignore index e69de29..c6ebbc3 100644 --- a/backend/.dockerignore +++ b/backend/.dockerignore @@ -0,0 +1,5 @@ +Dockerfile +docker-compose.yml +.dockerignore +*.md +app/db \ No newline at end of file diff --git a/backend/app/db/.dockerignore b/backend/app/db/.dockerignore new file mode 100644 index 0000000..b797ad9 --- /dev/null +++ b/backend/app/db/.dockerignore @@ -0,0 +1,2 @@ +Dockerfile +.dockerignore \ No newline at end of file From 5a9c958cfa48f439771e10852fa02961844eba37 Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Fri, 5 Aug 2022 17:11:43 -0400 Subject: [PATCH 03/11] Created a container image for the frontend and ensured that it excludes extraneous files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit References: React — Local Development With Docker-Compose | by Bhargav Bachina | Bachina Labs | Medium https://medium.com/bb-tutorials-and-thoughts/react-local-development-with-docker-compose-5a247710f997 bbachi/react-nodejs-example: Example Project demonstrating how to develop React application with Nodejs https://github.com/bbachi/react-nodejs-example Implement Docker With Hot Reloading In Next JS | by Bikash dulal | wesionaryTEAM | Medium https://medium.com/wesionary-team/impledocker-with-hot-reloading-in-next-js-f3e57fba84ce NewDocker https://gist.github.com/Bikash888/2f469d5a28594351fda4370cf69c85a3/ docker - How to test dockerignore file? - Stack Overflow https://stackoverflow.com/questions/38946683/how-to-test-dockerignore-file https://stackoverflow.com/a/71751097 https://stackoverflow.com/questions/38946683/how-to-test-dockerignore-file/71751097#71751097 docker - Can dockerfile be put in .dockerignore? - Stack Overflow https://stackoverflow.com/questions/47580298/can-dockerfile-be-put-in-dockerignore --- client/.dockerignore | 5 +++++ client/Dockerfile | 11 +++++++++++ 2 files changed, 16 insertions(+) create mode 100644 client/.dockerignore create mode 100644 client/Dockerfile diff --git a/client/.dockerignore b/client/.dockerignore new file mode 100644 index 0000000..744bfa0 --- /dev/null +++ b/client/.dockerignore @@ -0,0 +1,5 @@ +Dockerfile +.dockerignore +*.md +node_modules +build \ No newline at end of file diff --git a/client/Dockerfile b/client/Dockerfile new file mode 100644 index 0000000..15e5f91 --- /dev/null +++ b/client/Dockerfile @@ -0,0 +1,11 @@ +FROM node:16-slim + +WORKDIR /usr/src/app/client + +COPY package*.json ./ + +RUN npm install + +EXPOSE 3000 + +CMD ["npm", "run", "dev"] \ No newline at end of file From d9b7ed0787ae285cf2a3a3369223f92a24dc7930 Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Fri, 5 Aug 2022 17:11:43 -0400 Subject: [PATCH 04/11] Created a docker-compose file for fullstack development MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The docker-compose file manages the containers and provides the needed environment for development. References: Building and deploying Next.js applications with Docker - YouTube https://www.youtube.com/watch?v=aNh8iShFXto Koyeb - How to Dockerize and Deploy a Next.js Application on Koyeb https://www.koyeb.com/tutorials/how-to-dockerize-and-deploy-a-next-js-application-on-koyeb How To Connect Docker With Python Flask And ReactJS FrontEnd | Docker Flask React Made Easy| 2021 HD - YouTube https://www.youtube.com/watch?v=ISCiJmY1g2M react-flask-postgres-boilerplate-with-docker/docker-compose.yml at master · tomahim/react-flask-postgres-boilerplate-with-docker https://github.com/tomahim/react-flask-postgres-boilerplate-with-docker/blob/master/docker-compose.yml Implement Docker With Hot Reloading In Next JS | by Bikash dulal | wesionaryTEAM | Medium https://medium.com/wesionary-team/impledocker-with-hot-reloading-in-next-js-f3e57fba84ce Bikash888/nextjs-docker https://github.com/Bikash888/nextjs-docker Hot Reloading not working in Next.js 9 using custom routing, styled components and withApollo example · Issue #16449 · vercel/next.js https://github.com/vercel/next.js/issues/16449 NextJS Fast Refresh - GeeksforGeeks https://www.geeksforgeeks.org/nextjs-fast-refresh/ --- docker-compose.yml | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 docker-compose.yml diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..c351df5 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,46 @@ +version: '3.5' + +services: + client: + container_name: client + build: + context: ./client + ports: + - "3000:3000" + volumes: + - ./client:/usr/src/app/client + - /usr/src/app/client/node_modules + - /usr/src/app/client/.next + depends_on: + - server + + server: + container_name: server + build: + context: ./backend + volumes: + - './backend:/app' + ports: + - 5000:5000 + environment: + - APP_NAME={{aliascheck.app_name}} + - FLASK_DEBUG=1 + - PYTHONUNBUFFERED=0 + - APP_SETTINGS=app.config.DevelopmentConfig + - DATABASE_URL=postgresql://postgres:postgres@db:5432/users_dev + - DATABASE_TEST_URL=postgresql://postgres:postgres@db:5432/users_test + - SECRET_KEY=change_me_in_prod + depends_on: + - db + + db: + container_name: db + build: + context: ./backend/app/db + ports: + - 5432:5432 + volumes: + - /var/lib/postgresql/data + environment: + - POSTGRES_USER=postgres + - POSTGRES_PASS= From 253821fb934e7fd051b76ede256819e3dffc494c Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Fri, 5 Aug 2022 17:11:43 -0400 Subject: [PATCH 05/11] Enabled hot reloading MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit References: Implement Docker With Hot Reloading In Next JS | by Bikash dulal | wesionaryTEAM | Medium https://medium.com/wesionary-team/impledocker-with-hot-reloading-in-next-js-f3e57fba84ce Bikash888/nextjs-docker https://github.com/Bikash888/nextjs-docker nextjs-docker/next.config.js at main · Bikash888/nextjs-docker https://github.com/Bikash888/nextjs-docker/blob/main/next.config.js Hot Reloading not working in Next.js 9 using custom routing, styled components and withApollo example · Issue #16449 · vercel/next.js https://github.com/vercel/next.js/issues/16449 NextJS Fast Refresh - GeeksforGeeks https://www.geeksforgeeks.org/nextjs-fast-refresh/ next.config.js: Custom Webpack Config | Next.js https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config Hot reloading Next.js with Docker in development | James Chambers https://jameschambers.co.uk/nextjs-hot-reload-docker-development https://jameschambers.co.uk/nextjs-hot-reload-docker-development#step-3-update-nextconfigjs Building and deploying Next.js applications with Docker - YouTube https://www.youtube.com/watch?v=aNh8iShFXto Koyeb - How to Dockerize and Deploy a Next.js Application on Koyeb https://www.koyeb.com/tutorials/how-to-dockerize-and-deploy-a-next-js-application-on-koyeb How To Connect Docker With Python Flask And ReactJS FrontEnd | Docker Flask React Made Easy| 2021 HD - YouTube https://www.youtube.com/watch?v=ISCiJmY1g2M react-flask-postgres-boilerplate-with-docker/docker-compose.yml at master · tomahim/react-flask-postgres-boilerplate-with-docker https://github.com/tomahim/react-flask-postgres-boilerplate-with-docker/blob/master/docker-compose.yml --- client/next.config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/next.config.js b/client/next.config.js index a843cbe..ba6f265 100644 --- a/client/next.config.js +++ b/client/next.config.js @@ -1,6 +1,14 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + webpackDevMiddleware: config => { + config.watchOptions = { + poll: 1000, + aggregateTimeout: 300, + } + + return config + }, } module.exports = nextConfig From b67d0416e7e37c1b341171780f1c56e33c4088be Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Fri, 5 Aug 2022 17:00:22 -0400 Subject: [PATCH 06/11] Connected frontend to backend with proxy to get rid of CORS errors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The proxy also allows the frontend developers to write code assuming the frontend and backend are served on the same domain The proxy References: Proxying API Requests in Development | Create React App https://create-react-app.dev/docs/proxying-api-requests-in-development/ Node.js – React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED) – iTecNote https://itecnote.com/tecnote/ios-react-proxy-error-could-not-proxy-request-api-from-localhost3000-to-http-localhost8000-econnrefused/ Node.js – React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED) – iTecNote https://itecnote.com/tecnote/ios-react-proxy-error-could-not-proxy-request-api-from-localhost3000-to-http-localhost8000-econnrefused/#comments javascript - Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy - Stack Overflow https://stackoverflow.com/questions/61238680/access-to-fetch-at-from-origin-http-localhost3000-has-been-blocked-by-cors --- client/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/client/package.json b/client/package.json index f344d94..92c7bd3 100644 --- a/client/package.json +++ b/client/package.json @@ -8,6 +8,7 @@ "start": "next start", "lint": "next lint" }, + "proxy": "http://server:5000/", "dependencies": { "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", From 2e132ad8b60041a6a8b7441b68f89043dea25ff8 Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Fri, 5 Aug 2022 18:28:22 -0400 Subject: [PATCH 07/11] Bugfix: Enabled the server to connect to the database despite name conflict from docker-compose files The fullstack docker-compose file labels the database service `db` while the backend docker-compose file labels the same service `web-db` References: bash - How to check if an environment variable exists and get its value? - Stack Overflow https://stackoverflow.com/questions/39296472/how-to-check-if-an-environment-variable-exists-and-get-its-value https://stackoverflow.com/a/39296572 https://stackoverflow.com/questions/39296472/how-to-check-if-an-environment-variable-exists-and-get-its-value/39296572#39296572 Bash Reference Manual https://www.gnu.org/software/bash/manual/bash.html#Shell-Parameter-Expansion [fullstack docker-compose file] https://github.com/ChubaOraka/aliascheck/blob/43df7ac165378bc4e947ed08a006ad3736dd74f0/docker-compose.yml#L36 [backend docker-compose file] https://github.com/ChubaOraka/aliascheck/blob/43df7ac165378bc4e947ed08a006ad3736dd74f0/backend/docker-compose.yml#L25 --- backend/entrypoint.sh | 4 +++- docker-compose.yml | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/backend/entrypoint.sh b/backend/entrypoint.sh index 19eb578..f766ce8 100755 --- a/backend/entrypoint.sh +++ b/backend/entrypoint.sh @@ -2,7 +2,9 @@ echo "Waiting for postgres..." -while ! nc -z web-db 5432; do +database=${DB:-web-db} + +while ! nc -z $database 5432; do sleep 0.1 done diff --git a/docker-compose.yml b/docker-compose.yml index c351df5..d7b479b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -27,6 +27,7 @@ services: - FLASK_DEBUG=1 - PYTHONUNBUFFERED=0 - APP_SETTINGS=app.config.DevelopmentConfig + - DB=db - DATABASE_URL=postgresql://postgres:postgres@db:5432/users_dev - DATABASE_TEST_URL=postgresql://postgres:postgres@db:5432/users_test - SECRET_KEY=change_me_in_prod From 0bb73c253e829c79f904f862999a9e7e7c67b6ae Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Fri, 5 Aug 2022 17:11:43 -0400 Subject: [PATCH 08/11] Documented instructions for fullstack project setup The instructions includes setup with or without containers --- README.md | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) diff --git a/README.md b/README.md index e69de29..98bd576 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,152 @@ +# **ALIAS CHECK** + +The Alias Check helps confirm the availability of a username on different social networks. While it is intended as a learning project by the [Tech Interviews Nigeria](https://www.meetup.com/technicalinterviews/) that would introduce participants to different technologies in fullstack development, ranging from frontend technologies like [NextJS](https://nextjs.org/) to [Flask](https://flask.palletsprojects.com/) and [SQLite](https://www.sqlite.org/index.html) or [Postgres](https://www.postgresql.org/) on the backend in addition to [Docker](https://www.docker.com/) for development, its utility is quite apparent. For example, small businesses can see the application in the selection of an available and catchy name among major social media platform. + +This is project is structured so that the developer can choose to set it up with or without Docker. + + +
+ +# **PROJECT SETUP** +## **With Docker Compose** +To start the project using Docker, even from scratch, run the following command: + +```bash +docker-compose up +``` + +Then go to [http://localhost:3000/](http://localhost:3000/) to access the **frontend** or [http://localhost:5000/](http://localhost:5000/) to access the **backend** + +### **Backend-only Development** +For **backend developers** that might only need to run the `server` and `database`, run the following command: +```bash +docker-compose up server +``` +### **Frontend-only Development** +For **frontend developers** who might not need access to the backend for the features they want to add, stop other services besides `client` after starting up: +```bash +docker-compose up && \ +docker stop $(docker-compose ps --services | grep -v client) +``` +
+ +> **NOTES:** +> +> Add a `-d` switch to turn off logging and run the containers in detached mode +> ```bash +> docker-compose up -d +> ``` +> or +> ```bash +> docker-compose up -d server +> ``` +> While running in detached mode, you can view the logs at any time by running this command: +> ```bash +> docker-compose logs +> ``` +> You can check the logs of any one of the three services (*client*, *server* and *db*) running in detached mode like so: +> ```bash +> docker-compose logs +> ``` +> To continue the streaming the log output, add an `-f` switch: +> ```bash +> docker-compose logs -f +> ``` +### **Rebuilding Container images** +There might be need to rebuild any of the containers. For example, if the data in [create.sql](backend/app/db/create.sql) changes, you can rebuild the database container by running the command: +```bash +docker-compose build db +``` +### **Force Restarting Containers** +In some cases, starting the containers after shutting them down may result in some errors, especially if you make changes affecting the container images. In this case, you can rebuild the container images while starting up the containers: +```bash +docker-compose up --build --force-recreate +``` + +### **Shutting Down Containers** +You can also wind down the containers to pause development by running the following command: +```bash +docker-compose down +``` + +## **Without Docker Compose** +Though this project was built for easy startup with Docker, it can also be run without Docker. You would need to run the commands on two terminals, one for the *frontend* and the other for the *backend*: + +## **Frontend** +On one terminal, go to the frontend folder named `client`, install dependencies and run the development server: +```bash +cd client +npm install +npm run dev +``` + + +## **Backend** +On another terminal, create and activate a virtual environment, and then install the requirements. + +### Set Environment Variables + +Update *project/server/config.py*, and then run: + +```sh +$ cd backend +$ export APP_NAME="ALIAS CHECK API" +$ export APP_SETTINGS="app.config.ProductionConfig" +$ export FLASK_DEBUG=0 +``` +By default the app is set to use the production configuration. If you would like to use the development configuration, you can alter the `APP_SETTINGS` environment variable: + +```sh +$ export APP_SETTINGS="app.config.DevelopmentConfig" +``` + +Using [Pipenv](https://docs.pipenv.org/) Use the *.env* file to set environment variables: + +``` +APP_NAME="ALIAS CHECK API" +APP_SETTINGS="app.config.DevelopmentConfig" +FLASK_DEBUG=1 +``` + +### Create DB + +```sh +$ python manage.py create-db +$ python manage.py db init +$ python manage.py db migrate +``` + +### Run the Application + + +```sh +$ python manage.py run +``` + +Access the application at the address [http://localhost:5000/](http://localhost:5000/) + +### Testing + +Without coverage: + +```sh +$ python manage.py test +``` + +With coverage: + +```sh +$ python manage.py cov +``` + +Run flake8 on the app: + +```sh +$ python manage.py flake +``` + +or + +```sh +$ flake8 project +``` From cb9d8e367d8693970c1c43676fe2355bfc353993 Mon Sep 17 00:00:00 2001 From: ChubaOraka <17247707+ChubaOraka@users.noreply.github.com> Date: Sat, 20 Aug 2022 20:32:32 -0400 Subject: [PATCH 09/11] Added instructions on cloning repository --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index 98bd576..942ee17 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,23 @@ This is project is structured so that the developer can choose to set it up with
# **PROJECT SETUP** +## **Cloning Project** +Clone this repo and change directory into the project root folder by running the following commands: + +```bash +git clone https://github.com/KanaryStack/aliascheck.git +``` +>NOTE: +>If you have setup an SSH connection to this repo, you can run this command instead: +>```bash +>git clone git@github.com:KanaryStack/aliascheck.git +>``` + +then switch to the project root folder like so: +```bash +cd aliascheck +``` + ## **With Docker Compose** To start the project using Docker, even from scratch, run the following command: From 940bc4d36f8a34e65373e080024cf98d97b4cf52 Mon Sep 17 00:00:00 2001 From: ChubaOraka <17247707+ChubaOraka@users.noreply.github.com> Date: Sat, 20 Aug 2022 21:07:13 -0400 Subject: [PATCH 10/11] Added instruction on switching to last commit with Flask backend --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 942ee17..95a00b8 100644 --- a/README.md +++ b/README.md @@ -20,11 +20,16 @@ git clone https://github.com/KanaryStack/aliascheck.git >git clone git@github.com:KanaryStack/aliascheck.git >``` -then switch to the project root folder like so: +and go to the project root folder like so: ```bash cd aliascheck ``` +then switch to last stable branch with Flask backend: +```bash +git checkout 3f20eaa3aed83626d17d846c0f955a16e3f24737 +``` +## **Starting Up the Project** ## **With Docker Compose** To start the project using Docker, even from scratch, run the following command: From a707d1a3f6bceece5c73c10d86c31d557a521d1b Mon Sep 17 00:00:00 2001 From: Chuba Oraka Date: Sun, 21 Aug 2022 09:29:53 -0400 Subject: [PATCH 11/11] Changed commit hash to more recent commit so user can have access to more recent README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 95a00b8..30cd0e8 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ cd aliascheck ``` then switch to last stable branch with Flask backend: ```bash -git checkout 3f20eaa3aed83626d17d846c0f955a16e3f24737 +git checkout 940bc4d36f8a34e65373e080024cf98d97b4cf52 ``` ## **Starting Up the Project**