DEURL (Appwrite + NuxtJs)

Introduction 😶‍🌫

• ⫯  DEURL is a Demo URL Shortner website made with Appwrite + NuxtJs + ❤️
• ⫯  The site is intended to create a new short URL for external URLs
• ⫯  Note that this is just a Demo product and cannot be used as a commercial product.

---

Setup 🧰

  Step 1: Clone project repository

To get started first clone the project:

git clone https://github.com/AVDiv/appwrite_nuxtjs_url_shortner.git

Next change directory to the project folder:

cd appwrite_nuxtjs_url_shortner

If your have any interest in this project, please give it a star ⭐️ and fork it 🍴.
Add your changes and make pull requests to contribute to this project.

  Step 2: Install packages for the project

Before installing the packages please make sure that you are using a NodeJs version above 18.0.0.

To install the packages for the project, run the following command:

npm install

  Step 3: Initialize appwrite project

First install appwrite, if you haven't already!

Next install appwrite cli:

npm install -g appwrite-cli

After these installations we can proceed to initialize the appwrite project.
Login/Signin to the local appwrite server and create a new project in the name 'DeUrl'. In the project create a database named 'deurl' and a collection named 'url_tokens'.
Create 2 attributes with the following parameters:

┌──────────────┬────────┬──────────┬─────────────┼
| Attribute ID |  Type  | Required │    Length   │
├──────────────┼────────┼──────────┼─────────────┤
|     url      | string	|   True   │             │
|    token     | string	|   True   │             │
┼──────────────┴────────┴──────────┴─────────────┘

So, the appwrite project should be in this structure:

DeUrl(Project) ┐
               │
               │
          deurl(Database) ┐
                          │
                          │
                url_tokens(Collection) ┐
                                       ├ $id (Auto-generated Attribute)
                                       │
                                       ├ url (Attribute)
                                       │
                                       └ token (Attribute)

  Step 4: Add appwrite configurations

Now we need to add the appwrite configurations to the nuxt app, So it can communicate with the appwrite API to get data from the server.
For this we need 4 things from the appwrite server:

1. The Appwrite server's endpoint (Usually "http://localhost/v1/" for local servers).
2. The Appwrite Project ID
3. The Appwrite Database ID
4. The Appwrite Collection ID

First to find out the Appwrite endpoint and the project ID go to your appwrite dashboard and select the relevant project. From there you will see a ⚙️ Settings tab;

Click on the ⚙️ Settings tab and you will see the endpoint and the project ID on the right side, Copy the values of these values;

Next, click the 🗄 Databases tab on the left side;

Click on the Collection we created previously and click on the ⚙️ Settings tab and you will see the database ID and the collection ID on the right side, Copy the values of these values;

Now as we have copied all the values we need to paste it in the /model/appwrite/appwriteConfig.js file in the root directory of the project.

  Step 5: All set!!! 🥳🎉

That's it🥳, Now you can run the project with the following command:

npm run dev

This will start the nuxt app on the port 4000. If you want the project to run on another port you could change it on the nuxt configuration file( nuxt.config.js).
In case you are going through other errors while starting the project, Please check the errors section on this file.

---

Got errors? 🤯😭

This is the worst part of every project.🤪

Here are some fixes for issues that we ran into, In case you run into issues other than the listed, Please feel free to list it as an Issue.

code:ELIFECYCLE

If your error looks like this,

...
FATAL  Unexpected token '.'

at Loader.moduleStrategy (internal/modules/esm/translators.js:140:18)
at async link (internal/modules/esm/module_job.js:42:21)


╭───────────────────────────────────────╮
│                                       │
│   ✖ Nuxt Fatal Error                  │
│                                       │
│   SyntaxError: Unexpected token '.'   │
│                                       │
╰───────────────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
...

This is because of the version of node you are using. Please use node version 18.0.0 or above.

Error:0308010C

node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
...

This error could be fixed by the following command

export NODE_OPTIONS=--openssl-legacy-provider

Self signed certificate error

request to https://localhost/v1/databases/... failed, reason: self signed certificate

  at ClientRequest.<anonymous> (node_modules/appwrite/dist/cjs/sdk.js:400:23)
  at Generator.throw (<anonymous>)
  at rejected (node_modules/appwrite/dist/cjs/sdk.js:25:65)
  at process.processTicksAndRejections (node:internal/process/task_queues:96:5)

This error is thrown by node when it encounters a self-signed certificate(which means its unsecure) from a request done to an external URL.
In this project, An API calls are made to the backend of the nuxt app for various functions of the app and the nuxt app does API calls to the appwrite server to do transactions with the database.
So, in the second layer of API calls, as the nuxt backend makes the request from the appwrite server, the appwrite server responds with a self-signed certificate.
So, the ideal to resolve this error is to get an SSL certificate. But, As this project is not a app hosted or used as a end-product. We could disable the SSL verfication option in node.
Enter this command in your terminal:

export NODE_TLS_REJECT_UNAUTHORIZED=0

Note: This is never recommended for production use. Also, remember to ON SSL verification after you are done with looking the project.

export NODE_TLS_REJECT_UNAUTHORIZED=1