Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/AVDiv/appwrite_nuxtjs_url_shortner

A Demo URL Shortner website made with Appwrite + NuxtJs + ❤️
https://github.com/AVDiv/appwrite_nuxtjs_url_shortner

Last synced: 2 months ago
JSON representation

A Demo URL Shortner website made with Appwrite + NuxtJs + ❤️

Host: GitHub
URL: https://github.com/AVDiv/appwrite_nuxtjs_url_shortner
Owner: AVDiv
License: mit
Created: 2022-10-16T16:53:15.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-03-05T10:03:43.000Z (almost 2 years ago)
Last Synced: 2024-08-02T07:24:19.667Z (5 months ago)
Language: Vue
Homepage:
Size: 741 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-appwrite - Source Code

README

# DEURL (Appwrite + NuxtJs)

## Introduction 😶‍🌫

&cirmid; DEURL is a Demo URL Shortner website made with Appwrite + NuxtJs + ❤️

&cirmid; The site is intended to create a new short URL for external URLs

&cirmid; 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:

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

Next change directory to the project folder:

```bash
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:

```bash
npm install
```

### Step 3: Initialize appwrite project

First install appwrite, if you haven't already!

Next install appwrite cli:

```bash
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:

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:

The Appwrite server's endpoint (Usually "http://localhost/v1/" for local servers).

The Appwrite Project ID

The Appwrite Database ID

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:

```bash
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,

```bash
...
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

```bash
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

```bash
export NODE_OPTIONS=--openssl-legacy-provider
```

### Self signed certificate error

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

at ClientRequest. (node_modules/appwrite/dist/cjs/sdk.js:400:23)
at Generator.throw ()
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:
```bash
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.
```bash
export NODE_TLS_REJECT_UNAUTHORIZED=1
```