{"id":23297376,"url":"https://github.com/sandeep-shaw10/django-vercel","last_synced_at":"2025-10-28T01:31:44.713Z","repository":{"id":164438875,"uuid":"637120687","full_name":"sandeep-shaw10/django-vercel","owner":"sandeep-shaw10","description":"Django, Vercel and Postgres Setup using Tailwind CSS and new Vercel Storage (Beta)","archived":false,"fork":false,"pushed_at":"2023-05-12T11:51:54.000Z","size":2081,"stargazers_count":15,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-20T07:18:57.041Z","etag":null,"topics":["django","postgres","starter-template","tailwindcss","vercel","vercel-storage"],"latest_commit_sha":null,"homepage":"https://django-vercel-gules.vercel.app","language":"JavaScript","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/sandeep-shaw10.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-06T15:14:51.000Z","updated_at":"2024-11-26T17:09:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"f5bfca04-e9a1-4bca-94c0-f99c80052b29","html_url":"https://github.com/sandeep-shaw10/django-vercel","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/sandeep-shaw10%2Fdjango-vercel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandeep-shaw10%2Fdjango-vercel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandeep-shaw10%2Fdjango-vercel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandeep-shaw10%2Fdjango-vercel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sandeep-shaw10","download_url":"https://codeload.github.com/sandeep-shaw10/django-vercel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238579803,"owners_count":19495551,"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":["django","postgres","starter-template","tailwindcss","vercel","vercel-storage"],"created_at":"2024-12-20T07:17:27.263Z","updated_at":"2025-10-28T01:31:38.996Z","avatar_url":"https://github.com/sandeep-shaw10.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Django + Vercel + Postgres(Beta)\n\n![Screen shot](./assets/images/screenshot.png)\n\n![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge\u0026logo=django\u0026logoColor=green)\n![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)\n![Postgres](https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge\u0026logo=postgresql\u0026logoColor=white)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\n![coverage](https://img.shields.io/badge/version-1.0.0-cyan)\n\n[![coverage](https://img.shields.io/badge/Website-Click%20Here-orange)](https://django-vercel-gules.vercel.app/)\n\nThis is a template for a basic portfolio website built with Django, Vercel, and TailwindCSS. The website is hosted on Vercel, using Vercel Storage which provides Postgres for database.\n\n## Requirements\n- Python 3.11 or more\n- Github Account\n- Vercel Account\n- Python Requirements\n\n[requirements.txt](./requirements.txt)\n```ssh\nasgiref==3.6.0\nDjango==4.2.1\npsycopg2-binary==2.9.6\npython-dotenv==1.0.0\nsqlparse==0.4.4\ntzdata==2023.3\nwhitenoise==6.4.0\n```\n\n# Installation and Setup\n\n\n\n## 1. Git Clone via `SSH`, `HTTP` or Download `.zip`\n\n```bash\ngit clone https://github.com/sandeep-shaw10/django-vercel.git\n```\n\n## 2. Creating and Activating Virtual Environment\n\nInside Project Directory\n```bash\ncd django-vercel\n```\n\nCreate virtual environment \n```bash\npython -m venv venv-django\n```\n\nActivate Virtual environment\n```bash\nsource venv-django/Scripts/activate\n```\n\n## 3. Install Python Dependency\n\n```python\npip install -r requirements.txt\n```\n\n## 4. Create `.env` file\n\nCreate a `.env` file in the template folder. You may copy it from [.env.example](.env.example)\n\n```bash\nDEBUG='False'\nSECRET_KEY='django-key-should-be-strong-^28%=s79k2icoihozrx-cx'\nALLOWED_HOSTS='127.0.0.1,.vercel.app'\nPOSTGRES_DATABASE='***'\nPOSTGRES_USER='***'\nPOSTGRES_PASSWORD='***'\nPOSTGRES_HOST='***'\nPOSTGRES_DB_PORT='5432'\nADMIN_PATH='my-admin'\n```\n\n## 5. Add to your Github\n\nLogin to your Github Account and Create New Repository\n\nInside your local folder remove git folder if it exists\n\n```bash\nrm -rf .git\n```\n\nAdd the files to the new repository and Commit\n```python\ngit init\ngit add .\ngit commit -m \"Initial commit\"\n```\n\nSet the remote URL for the new repository\n```bash\ngit remote add origin \u003cnew_repository_url\u003e\n```\n\nPush the files to the new repository to branch 'master'\n```bash\ngit push -u origin master\n```\n\n## 6. Link to VERCEL\n\nLogin to the vercel account and create NEW project\n\n\nLink the Github repository that you currently created to Vercel\n- Framework Present: `Other`\n- Root Directory: `./`\n- No need to configure Build and Output setting\n\n**Add Only these 5 environment variable (IMPORTANT)**\n- `ALLOWED_HOSTS`: 127.0.0.1,.vercel.app\n- `DEBUG`: False\n- `SECRET_KEY`: (Add strong Django SECRET Key, Should be same as the local file)\n- `ADMIN_PATH` (Optional if you don't want your Admin route to be `admin`)\n- `POSTGRES_DB_PORT`: 5432\n\n![](./assets/images/v1.png)\n\nConnect PostgresSQL from Vercel Storage (Beta feature), if database exist or else create new PostgresSQL\n![](./assets/images/v3.png)\n\nAfter Successfuly connecting the Database, it will add all the environment variable related to Postgres.\n\n![](./assets/images/v4.png)\n\n## 6. Changes from Local Device\n\nCopy all the necessary environment variable to localhost in `.env`. Moreover the environment variable in localhost and in Vercel should be same.\n\nThis will allow us to perform migrations and create superuser for local device.\n\nOnly copy 4 postgres environment variable to local. Rest of it is not required\n- POSTGRES_DATABASE\n- POSTGRES_USER\n- POSTGRES_HOST\n- POSTGRES_PASSWORD\n\nThe resulting `.env` file in the local device will look like this\n```env\nDEBUG='True'\nSECRET_KEY='django-key-should-be-strong-^28%=s79k2icoihozrx-cx'\nALLOWED_HOSTS='127.0.0.1,.vercel.app'\nPOSTGRES_DATABASE='***'\nPOSTGRES_USER='***'\nPOSTGRES_PASSWORD='***'\nPOSTGRES_HOST='***'\nPOSTGRES_DB_PORT='5432'\nADMIN_PATH='my-admin'\n```\n\nStart the local server again to load the current change in environment variable\n\n```bash\npy manage.py runserver\n```\n\nCreate superuser\n```bash\npy manage.py createsuperuser\n```\n\nIssue: [Git Bash: Superuser creation skipped due to not running in a TTY](https://stackoverflow.com/questions/32532900/not-able-to-create-super-user-with-django-manage-py#answer-37093626)\n\nCreate Migrations\n```bash\npy manage.py makemigrations\npy manage.py migrate\n```\n\n## 7. Redeploy Vercel Project\n\nAs all the environment varible is now available, migration done and superuser is created. Now we can re-deploy the application without any error\n\n![](./assets/images/v5.png)\n\n\n## 8. Open your Admin\n\n\nIf ADMIN_PATH is set then path: `\u003capp-name\u003e/\u003cADMIN_PATH\u003e`\n\nOtherwise path: `\u003capp-name\u003e/admin`\n\n![](./assets/images/v6.png)\n\n## 9. Configuration\n\nChange Admin Heading: [core/urls.py](./core/urls.py)\n\n```py\n# Admin Display\nadmin.site.site_header = 'My Name'         \nadmin.site.index_title = 'Portfolio'\nadmin.site.site_title = 'Sandeep Shaw' \n```\n\nChange HTML Pages: [templates/](./templates/)\n\nScope for Adding images, css, js: [assets/](./assets/)\n\nAfter adding any static file, run the collectstatic command which will create folder: [static/](./static/)\n```bash\npy manage.py collectstatic\n```\n\nChanging the Theme Color: [templates/base.html](./templates/base.html)\n\n```html\n    \u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        // Scope to format color\n        tailwind.config = {\n            theme: {\n                extend: { \n                    colors: {\n                        'shaw': {\n                            0: '#e2f3f1',\n                            100: '#c6e8e4',\n                            200: '#a9ddd6',\n                            300: '#96c7c1',\n                            400: '#83b1ab',\n                            500: '#5d857f',\n                            600: '#375954',\n                            700: '#24433e',\n                            800: '#1b3833',\n                            900: '#112c28',\n                            999: '#061714'\n                        },\n                    }\n                }\n            },\n        }\n    \u003c/script\u003e\n```\n\nCustom 404 Error Page: [templates/404.html](./templates/404.html)\n\nCustom 500 Error Page: [templates/500.html](./templates/500.html)\n\n## Step-by-Step Video Tutorial\n\n[![coverage](https://img.shields.io/badge/Youtube%20Tutorial-Visit-red)](https://www.youtube.com/watch?v=erLOWlo6nGA)\n\n\n## Resources and Reference\n- [Tailwind Kit](https://www.tailwind-kit.com)\n- [Flowbite](https://flowbite.com/)\n- [Unsplash](https://unsplash.com/)\n- [XSGames: Random User Image Generator](https://xsgames.co/randomusers/)\n\n## Contributing\nIf you'd like to contribute to this template, please open an issue or submit a pull request.\n\nIf you encounter any issues with Python version or operating system compatibility, please feel free to contribute to the repository by submitting an issue or pull request. We welcome all contributions to make this template more accessible to developers on different platforms.\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandeep-shaw10%2Fdjango-vercel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandeep-shaw10%2Fdjango-vercel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandeep-shaw10%2Fdjango-vercel/lists"}