{"id":13534065,"url":"https://github.com/AVDiv/appwrite_nuxtjs_url_shortner","last_synced_at":"2025-04-01T22:31:10.531Z","repository":{"id":111582486,"uuid":"552465220","full_name":"AVDiv/appwrite_nuxtjs_url_shortner","owner":"AVDiv","description":"A Demo URL Shortner website made with Appwrite + NuxtJs + ❤️","archived":false,"fork":false,"pushed_at":"2023-03-05T10:03:43.000Z","size":759,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-02T21:31:53.202Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AVDiv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-10-16T16:53:15.000Z","updated_at":"2023-04-10T16:16:18.000Z","dependencies_parsed_at":"2024-01-14T02:33:23.732Z","dependency_job_id":"8b329678-865e-4b33-a1b5-a49767202de4","html_url":"https://github.com/AVDiv/appwrite_nuxtjs_url_shortner","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AVDiv%2Fappwrite_nuxtjs_url_shortner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AVDiv%2Fappwrite_nuxtjs_url_shortner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AVDiv%2Fappwrite_nuxtjs_url_shortner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AVDiv%2Fappwrite_nuxtjs_url_shortner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AVDiv","download_url":"https://codeload.github.com/AVDiv/appwrite_nuxtjs_url_shortner/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246720481,"owners_count":20822911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:01:26.009Z","updated_at":"2025-04-01T22:31:10.009Z","avatar_url":"https://github.com/AVDiv.png","language":"Vue","funding_links":[],"categories":["Showcase (Built with Appwrite 📣)"],"sub_categories":["Vue"],"readme":"\u003cfont face=\"Raleway\"\u003e\n\u003ccenter\u003e\n\n# DEURL \u0026#40;Appwrite + NuxtJs\u0026#41;\n\u003c/center\u003e\n\n## Introduction 😶‍🌫\n\u003cul type=\"none\"\u003e\n \u003cli\u003e\u003cfont color=\"#6495ed\"\u003e\u0026cirmid;\u0026nbsp;\u0026nbsp;\u003c/font\u003eDEURL is a Demo URL Shortner website made with Appwrite + NuxtJs + ❤️\u003c/li\u003e\n \u003cli\u003e\u003cfont color=\"#6495ed\"\u003e\u0026cirmid;\u0026nbsp;\u0026nbsp;\u003c/font\u003eThe site is intended to create a new short URL for external URLs\u003c/li\u003e\n \u003cli\u003e\n   \u003cfont color=\"#6495ed\"\u003e\u0026cirmid;\u0026nbsp;\u0026nbsp;\u003c/font\u003eNote that this is just a \u003cb\u003e Demo product\u003c/b\u003e and \u003cb\u003ecannot be used as a commercial product.\u003c/b\u003e\n \u003c/li\u003e\n\u003c/ul\u003e\n\u003cimg src=\"readme_resources/Screenshot_DEURL - Brave_2.png\" alt=\"DeURL home\"\u003e\n\u003ccenter\u003e\n\u003cdiv\u003e\n\u003cimg src=\"readme_resources/Screenshot_DEURL - Brave_3.png\" width=\"50%\" \u003e\n\u003cimg src=\"readme_resources/Screenshot_DEURL - Brave_5.png\" width=\"50%\"\u003e\n\u003c/div\u003e\n\u003c/center\u003e\n\u003chr\u003e\n\n## Setup 🧰\n\u003cdiv\u003e\n\n### \u0026nbsp;\u0026nbsp;Step 1: Clone project repository\n\u003cp\u003e\n    To get started first clone the project:\n\u003c/p\u003e\n\n```bash\ngit clone https://github.com/AVDiv/appwrite_nuxtjs_url_shortner.git\n```\n\u003cp\u003e\n    Next change directory to the project folder:\n\u003c/p\u003e\n\n```bash\ncd appwrite_nuxtjs_url_shortner\n```\nIf your have any interest in this project, please give it a star ⭐️ and fork it 🍴.\u003cbr\u003e\nAdd your changes and make pull requests to contribute to this project.\n\u003c/div\u003e\n\u003cdiv\u003e\n\n### \u0026nbsp;\u0026nbsp;Step 2: Install packages for the project\n\u003cp\u003e\n    Before installing the packages please make sure that you are using a NodeJs version above 18.0.0.\n\u003c/p\u003e\n\u003cp\u003e\n    To install the packages for the project, run the following command:\n\u003c/p\u003e\n\n```bash\nnpm install\n```\n\u003c/div\u003e\n\u003cdiv\u003e\n\n### \u0026nbsp;\u0026nbsp;Step 3: Initialize appwrite project\n\u003cp\u003e\n    First install \u003ca href=\"https://appwrite.io/docs/installation\"\u003eappwrite\u003c/a\u003e, if you haven't already!\n\u003c/p\u003e\n\u003cp\u003e\n    Next install appwrite cli:\n\u003c/p\u003e\n\n```bash\nnpm install -g appwrite-cli\n```\n\u003cp\u003e\n    After these installations we can proceed to initialize the appwrite project.\u003cbr\u003e\n    Login/Signin to the local appwrite server and create a new project in the name 'DeUrl'.\n    In the project create a database named 'deurl' and a collection named 'url_tokens'.\u003cbr\u003e\n    Create 2 attributes with the following parameters:\n\u003c/p\u003e\n    \n    ┌──────────────┬────────┬──────────┬─────────────┼\n    | Attribute ID |  Type  | Required │    Length   │\n    ├──────────────┼────────┼──────────┼─────────────┤\n    |     url      | string\t|   True   │             │\n    |    token     | string\t|   True   │             │\n    ┼──────────────┴────────┴──────────┴─────────────┘\n\u003cbr\u003e\n\u003cp\u003e\n  So, the appwrite project should be in this structure:\n\u003c/p\u003e\n\n    DeUrl(Project) ┐\n                   │\n                   │\n              deurl(Database) ┐\n                              │\n                              │\n                    url_tokens(Collection) ┐\n                                           ├ $id (Auto-generated Attribute)\n                                           │\n                                           ├ url (Attribute)\n                                           │\n                                           └ token (Attribute)\n\n\u003c/div\u003e\n\u003cdiv\u003e\n\n### \u0026nbsp;\u0026nbsp;Step 4: Add appwrite configurations\n\u003cp\u003e\n    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.\u003cbr\u003e\n    For this we need 4 things from the appwrite server:\u003cbr\u003e\n\u003col\u003e\n\u003cli\u003eThe Appwrite server's endpoint (Usually \"http://localhost/v1/\" for local servers).\u003c/li\u003e\n\u003cli\u003eThe Appwrite Project ID\u003c/li\u003e\n\u003cli\u003eThe Appwrite Database ID\u003c/li\u003e\n\u003cli\u003eThe Appwrite Collection ID\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/p\u003e\n\u003cp\u003e\n    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 \u003ccode\u003e ⚙️ Settings\u003c/code\u003e tab;\n\u003c/p\u003e\n\u003cimg src=\"readme_resources/Screenshot_20220920.png\"\u003e\n\u003cp\u003e\n    Click on the \u003ccode\u003e ⚙️ Settings\u003c/code\u003e tab and you will see the endpoint and the project ID on the right side, Copy the values of these values;\n\u003c/p\u003e\n\u003cimg src=\"readme_resources/Screenshot_20220925.png\"\u003e\n\u003cp\u003e\n    Next, click the \u003ccode\u003e 🗄 Databases\u003c/code\u003e tab on the left side;\n\u003c/p\u003e\n\u003cimg src=\"readme_resources/Screenshot_20220926.png\"\u003e\n\u003cp\u003e\n    Click on the Collection we created previously and click on the \u003ccode\u003e ⚙️ Settings\u003c/code\u003e tab and you will see the database ID and the collection ID on the right side, Copy the values of these values;\n\u003c/p\u003e\n\u003cimg src=\"readme_resources/Screenshot_20220927.png\"\u003e\n\u003cp\u003e\n    Now as we have copied all the values we need to paste it in the \u003ccode\u003e /model/appwrite/appwriteConfig.js\u003c/code\u003e file in the root directory of the project.\n\u003c/p\u003e\n\u003c/div\u003e \n\u003cdiv\u003e\n\n### \u0026nbsp;\u0026nbsp;Step 5: All set!!! 🥳🎉\n\u003cp\u003e\n    That's it🥳,\n    Now you can run the project with the following command:\n\n```bash\nnpm run dev\n```\n\u003c/p\u003e\n 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(\u003ccode\u003e nuxt.config.js\u003c/code\u003e).\u003cbr\u003e\n In case you are going through other errors while starting the project, Please check the \u003ca href=\"#errors\"\u003eerrors section\u003c/a\u003e on this file.\n\n\u003c/p\u003e\n\u003c/div\u003e\n\u003chr\u003e\n\n## Got errors? 🤯😭\n\u003cp id=\"errors\"\u003e\n    This is the worst part of every project.🤪\u003cbr\u003e\u003cbr\u003e\n    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 \u003cb\u003eIssue\u003c/b\u003e.\n\u003c/p\u003e\n\u003cdiv\u003e\n\n### code:ELIFECYCLE\n\u003cp\u003e\n    If your error looks like this,\n\u003c/p\u003e\n\n```bash\n...\nFATAL  Unexpected token '.'\n\nat Loader.moduleStrategy (internal/modules/esm/translators.js:140:18)\nat async link (internal/modules/esm/module_job.js:42:21)\n\n\n╭───────────────────────────────────────╮\n│                                       │\n│   ✖ Nuxt Fatal Error                  │\n│                                       │\n│   SyntaxError: Unexpected token '.'   │\n│                                       │\n╰───────────────────────────────────────╯\n\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! @ dev: `nuxt`\nnpm ERR! Exit status 1\nnpm ERR!\nnpm ERR! Failed at the @ dev script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n...\n```\n\u003cp\u003e\n    This is because of the version of node you are using. Please use node version 18.0.0 or above.\n\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\n### Error:0308010C\n\n```bash\nnode:internal/crypto/hash:67\n  this[kHandle] = new _Hash(algorithm, xofLen);\n                  ^\n\nError: error:0308010C:digital envelope routines::unsupported\n    at new Hash (node:internal/crypto/hash:67:19)\n    at Object.createHash (node:crypto:130:10)\n...\n```\n\nThis error could be fixed by the following command\n\n```bash\nexport NODE_OPTIONS=--openssl-legacy-provider\n```\n\u003c/div\u003e\n\u003cdiv\u003e\n\n### Self signed certificate error\n\n\n```bash\nrequest to https://localhost/v1/databases/... failed, reason: self signed certificate\n\n  at ClientRequest.\u003canonymous\u003e (node_modules/appwrite/dist/cjs/sdk.js:400:23)\n  at Generator.throw (\u003canonymous\u003e)\n  at rejected (node_modules/appwrite/dist/cjs/sdk.js:25:65)\n  at process.processTicksAndRejections (node:internal/process/task_queues:96:5)\n```\nThis error is thrown by node when it encounters a self-signed certificate(which means its unsecure) from a request done to an external URL. \u003cbr\u003e\nIn 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. \u003cbr\u003e\nSo, 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. \u003cbr\u003e\nSo, 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. \u003cbr\u003e\nEnter this command in your terminal:\n```bash\nexport NODE_TLS_REJECT_UNAUTHORIZED=0\n```  \n\u003cb\u003eNote: This is never recommended for production use. Also, remember to ON SSL verification after you are done with looking the project.\u003c/b\u003e\n```bash\nexport NODE_TLS_REJECT_UNAUTHORIZED=1\n```\n\n\u003c/div\u003e\n\u003c/font\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAVDiv%2Fappwrite_nuxtjs_url_shortner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAVDiv%2Fappwrite_nuxtjs_url_shortner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAVDiv%2Fappwrite_nuxtjs_url_shortner/lists"}