🌱 Upgraded next-leaflet

ThijmenGThN · Jan 12, 2024 · 7fd4635 · 7fd4635
1 parent 1f6c8e6
commit 7fd4635
Show file tree

Hide file tree

Showing 27 changed files with 7,017 additions and 6,741 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,27 +1,12 @@
 
-#             next-leaflet - config version 0.1.0
+#             next-leaflet - config version 0.2.0
 #        ━━  An optimized tech stack for efficiency.  ━━
 #             Need help? mail@thijmenheuvelink.nl
 
+# Instruct Docker to execute the runtime in either production or developer mode.
+# ┗━ Accepts: Boolean ━━ Default: "true"
+PRODUCTION= "true"
 
-# ━━ Docker ━━
-
-# Docker deploy modifier, either puts the stack in development or production mode.
-# ┗━ Options: "dev" or "prod" ━━ default: "dev"
-COMPOSE_PROFILES= "dev"
-
-# Docker application port, which port the web app will listen on.
-# ┗━ Options: "number" ━━ default: "3000"
-NEXT_PORT= "3000"
-
-# Docker pocketbase port, this is the port the backend listens on.
-# ┗━ Options: "number" ━━ default: "8090"
-POCKETBASE_PORT= "8090"
-
-
-# ━━ Next ━━
-
-# Pocketbase Endpoint, public address to the backend.
-# ┗━ Options: "number" ━━ default: "http://localhost:8090" ━ example: "https://pb.leaflet.app"
-NEXT_PUBLIC_POCKETBASE_URL = "http://localhost:8090"
-
+# Port to listen and serve your web app on.
+# ┗━ Accepts: Integer ━━ Default: "3000"
+PORT= "3000"
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -2,6 +2,8 @@ name: Deploy
 
 on:
   push:
+    # Branch on which to automatically run the deploy-action.
+    # ┗━ Options: branch.name ━━ example: "main"
     branches: main
 
 jobs:
@@ -20,8 +22,9 @@ jobs:
             
             sudo git clone https://github.com/${{github.repository}} .
             sudo git clean -f
+            sudo git checkout -f
             sudo git pull
-            
+
             echo '${{ secrets.APP_ENV }}' > .env
             
             sudo docker-compose pull
@@ -39,4 +42,4 @@ jobs:
             cd ~/env/${{github.event.repository.name}}
 
             sudo docker-compose down
-            sudo docker-compose up -d
+            sudo docker-compose up -d --remove-orphans
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 
 # Environment
-.env
-.env*.local
+.env*
+!.env.sample
 
 
 # Next.JS

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,12 +1,13 @@
 {
     "files.exclude": {
+        "src/backend/routes/nginx.conf": true,
         "src/locales/i18n.ts": true,
         "package-lock.json": true,
         "postcss.config.js": true,
         ".eslintrc.json": true,
-        "middleware.ts": true,
         "next-env.d.ts": true,
         "node_modules": true,
+        "**/.gitkeep": true,
         "LICENSE.md": true,
         "debug.log": true,
         ".vscode": true,

diff --git a/README.md b/README.md
@@ -1,142 +1,186 @@
 
-# Wiki
+# next-leaflet
+
+An optimized tech stack for efficiency, an all-in-one solution to quickly build modern web apps.
+
+![preview](https://i.imgur.com/oulW1VO.png)
 
-An open-source wiki built with Pocketbase as backend, based on [next-leaflet](https://github.com/ThijmenGThN/next-leaflet) (a template), easily deploy this yourself via the instructions below.
 
-![preview](https://i.imgur.com/9tsGgDn.png)
 
 ### Powered by
 
 - [NextJS](https://nextjs.org)
 - [Pocketbase](https://pocketbase.io)
 
-## Development
 
-<details><summary>Instructions</summary>
 
-1. Install the required dependencies:
-    - [NodeJS](https://nodejs.org)
-    - [Docker](https://docker.com/get-started/)
+### Features
+
+- [Realtime Database](https://pocketbase.io)
+- [Authentication](https://pocketbase.io/docs/authentication/)
+- [File Storage](https://pocketbase.io/docs/files-handling/)
+- [Localization](https://next-intl-docs.vercel.app)
+
+
+
+### Includes
 
-2. Clone the repository to your system. 
+- [Tailwind](https://tailwindcss.com)
+- [Gravatar](https://gravatar.com)
+- [Heroicons](https://heroicons.com)
+- [HeadlessUI](https://headlessui.com)
 
-    1.
-        ```sh 
-        git clone https://github.com/ThijmenGThN/Wiki
-        ```
 
-    2. 
-        ```sh
-        cd Wiki
-        ```
 
-3. Preparing the environment, it is recommend to use the sample file.
+## Getting Started
 
-    1. 
-        ```sh
-        cp sample.env .env
-        ```
+<details><summary>Development</summary>
 
-    2.
-        ```sh
-        nano .env
-        ```
+### Dependencies
 
-4. Install the required packages, by default we do this with npm.
+- Install docker and docker compose.
+
+    - Windows: [Docker Desktop](https://www.docker.com/get-started/)
+    - Linux: [Guide from Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-compose-on-ubuntu-22-04)
+    - Ubuntu >20.04: [Guide from Thijmen Heuvelink](https://wiki.thijmenheuvelink.nl/linux/install-docker)
 
-    ```
-    npm install
-    ```
+### Development
 
-5. Running Next.js for development.
+> Ensure that you've [cloned](https://git-scm.com/docs/git-clone) the repository and are on the correct path. 
 
-    ```sh
-    npm run dev
-    ```
+#### Start
 
-6. Starting pocketbase via docker.
+``` docker compose up ```
 
-    ```sh
-    docker-compose up
-    ```
-    > Pocketbase can later be closed via `CTRL + C`
+The stack is now accessible on your preferred browser at http://localhost:3000, the pocketbase interface can be found at http://localhost:3000/pb/_/
+
+#### Stop
+
+To stop the stack from running simply execute the ` CTRL + C ` shortcut.
 
 </details>
 
-## Deployment
 
-<details><summary>Instructions</summary>
 
-1. Install the required dependencies:
-    - [Docker](https://docker.com/get-started/)
+<details><summary>Production</summary>
+
+### Preparation
+
+1. Create a ` .env ` file:
+   - Locate the ` .env.sample ` file in your project directory.
+   - Duplicate or copy the contents of this file.
+   - Rename the duplicate or copied file to ` .env `. 
+
+2. Configure the environment variable:
+   - Open the ` .env ` file in a text editor.
+   - Locate the line that defines the ` PRODUCTION ` variable.
+   - Set the value of ` PRODUCTION ` to ` "true" ` (include the quotes).
 
-2. Clone the repository to your system. 
+### Production
 
-    1.
-        ```sh 
-        git clone https://github.com/ThijmenGThN/Wiki
-        ```
+#### Start
 
-    2. 
-        ```sh
-        cd Wiki
-        ```
+> Unlike in the development steps we now add the  ` -d ` flag which makes the service run in the background.
 
-3. Preparing the environment, it is recommend to use the sample file.
+``` docker compose up -d ```
 
-    1. 
-        ```sh
-        cp sample.env .env
-        ```
+The stack is now accessible on your preferred browser at http://localhost:3000 or on a differently defined port as stated in the `.env` file, the pocketbase interface can be found at http://localhost:3000/pb/_/
 
-    2.
-        ```sh
-        nano .env
-        ```
 
-4. Deploying your app with docker.
 
-    ```sh
-    docker-compose up -d
-    ```
-    > To stop your app from running, execute the following: `docker compose down`
+#### Stop
+
+``` docker compose down ```
 
 </details>
 
 
-### Deployment - GitHub Actions
 
-<details><summary>Instructions</summary>
+## Fundamentals
+
+<details><summary>Install Node Packages</summary>
+
+#### Install
+
+``` docker compose exec next npm i -D <package> ```
+
+#### Remove
 
-> **IMPORTANT** The CI/CD workflow for next-leaflet has been setup in a way where it'll connect to any VPS via SSH as defined in the Repository Secrets.
+``` docker compose exec next npm r <package> ```
 
-1. Prepare your VPS.
+</details>
 
-    1. Install the required dependencies:
+> ` NPM ` ` MODULES `
 
-        - [Docker](https://docker.com/get-started/)
 
-2. Configure your runner.
+<details><summary>Next Navigation API</summary>
 
-    1. Within Github navigate to 
-        
-        ` Settings > Secrets and variables > Actions `
+Instead of using `next/navigation` you should opt for the helper at ` @helpers/navigation `, this is a replacement required by ` next-intl ` it offers the same functionality.
 
-    2. Create the following repository secrets:
+</details>
 
-        Name|Expects|Description
-        -|-|-
-        SSH_KEY|Private Key|Generate a new ssh key without a password.
-        SSH_HOST|IP Address|The address of your server with an Actions (runner) active.
-        SSH_USER|Username|Host system user where next-leaflet should be deploy on.
-        SSH_PORT|Port Number|This usually refers to the default ssh port 22.
-        APP_ENV|Environment|A copy of .env.sample with adjusted values for deployment.
+> ` Link ` ` useRouter ` ` Redirect ` ` usePathname `
 
-3. Enable the workflow.
 
-    1. Designate a trigger branch within the ` .github/deploy.yml ` file.
+<details><summary>Accessing Pocketbase</summary>
 
-        > Any change pushed to the targeted branch should now trigger a request to deploy next-leaflet via docker-compose on the designated VPS.
+Pocketbase has a client executable, below is an example that outputs all available commands. You can learn more on how to use it [here](https://pocketbase.io/docs).
 
+``` docker compose exec pocketbase pocketbase --help ```
 
 </details>
+
+> ` CLI `
+
+
+<details><summary>Schema Snapshots</summary>
+
+Executing the following will generate a schema snapshot in ` src/backend/migrations `, note that this process does not save any collection data.
+
+``` docker compose exec pocketbase pocketbase migrate collections ```
+
+</details>
+
+> ` Pocketbase ` ` Migrations `
+
+
+
+## Extras
+
+<details><summary>Continuous Integration</summary>
+
+### Preparation
+
+> The workflow has been set up to connect to any VPS via SSH as defined in the Repository Secrets.
+
+1. Install docker and docker compose on your VPS.
+
+    - Windows: [Docker Desktop](https://www.docker.com/get-started/)
+    - Linux: [Guide from Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-compose-on-ubuntu-22-04)
+    - Ubuntu >20.04: [Guide from Thijmen Heuvelink](https://wiki.thijmenheuvelink.nl/linux/install-docker)
+
+2. Setup a Runner on GitHub
+
+    1. Create a new Runner
+
+        - Navigate to ` Settings > Actions > Runners `
+
+            > To set up a new self-hosted runner, follow the instructions provided by GitHub to configure the runner to listen for jobs. It is advisable to install it as a service.
+
+    2. Define environment variables
+
+        - Navigate and create new secrets in `Settings > Secrets and variables > Actions`
+
+            Name|Expects|Description
+            -|-|-
+            SSH_KEY|Private Key|Generated private ssh-key which will beused    to access the VPS.
+            SSH_HOST|IP Address|The address of your VPS that runs theGitHub    Actions Runner.
+            SSH_USER|Username|System user which should be utilized for deployments.
+            SSH_PORT|Port Number|The port that will be used to connectwith     the VPS, default is 22.
+            APP_ENV|Environment|Contents of the ` .env ` file withadjusted     values for deployment.
+
+### Activation
+
+Define the branch in `.github/deploy.yml` and modify it from being ` disabled ` to an existing branch. Any modifications made to that particular branch will automatically trigger the Action, deploying your stack to your VPS.
+
+</details>