{"id":27442920,"url":"https://github.com/lesi-nedo/sample-project","last_synced_at":"2026-04-11T13:03:24.820Z","repository":{"id":287934553,"uuid":"966272326","full_name":"lesi-nedo/sample-project","owner":"lesi-nedo","description":"A web project skeleton using TypeScript, Svelte 5, Tailwind 4, and Rollup 4 for the frontend, integrated with a Python backend (Django or Flask). It covers initialization, configuration of each tool, and bridging the frontend/backend build processes.","archived":false,"fork":false,"pushed_at":"2025-04-14T17:40:48.000Z","size":18035,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T01:17:01.991Z","etag":null,"topics":["django","flask","rollup","setup","svelte","tailwindcss","template"],"latest_commit_sha":null,"homepage":"https://nedo.im/blog/2025/04/14/svelte-tailwind-with-rollup-and-djangoflask-as-the-backend","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lesi-nedo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2025-04-14T17:04:39.000Z","updated_at":"2025-04-14T17:52:23.000Z","dependencies_parsed_at":"2025-04-14T18:55:53.064Z","dependency_job_id":null,"html_url":"https://github.com/lesi-nedo/sample-project","commit_stats":null,"previous_names":["lesi-nedo/sample-project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesi-nedo%2Fsample-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesi-nedo%2Fsample-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesi-nedo%2Fsample-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lesi-nedo%2Fsample-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lesi-nedo","download_url":"https://codeload.github.com/lesi-nedo/sample-project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248986314,"owners_count":21194025,"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","flask","rollup","setup","svelte","tailwindcss","template"],"created_at":"2025-04-15T01:17:24.405Z","updated_at":"2025-12-30T23:05:05.861Z","avatar_url":"https://github.com/lesi-nedo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Project Setup: Svelte 5, Tailwind 4, Rollup 4 with Django/Flask Backend\n\nThis project demonstrates how to set up a web application using TypeScript, Svelte v5.x, Tailwind v4.x, and Rollup v4.x for the frontend, integrated with either a Django or Flask backend.\n\nThis setup is the result of the blog post: [Svelte + Tailwind with Rollup and Django/FastAPI as the backend](https://nedo.im/blog/2025/04/14/svelte-tailwind-with-rollup-and-djangoflask-as-the-backend)\n\n\n## Prerequisites\n\n- Node.js (v22.14.0 or later recommended)\n- npm (v10.9.2 or later recommended)\n- Python (3.13 recommended)\n- Conda (optional, for virtual environment management)\n\n## Project Structure\n\n```\nmyproject/\n├── django_back/      # Django backend files\n│   ├── manage.py\n│   ├── mysite/       # Django project settings\n│   ├── myapp/        # Django app\n│   ├── static/       # Static files for Django (including frontend build)\n│   ├── templates/    # Django templates\n│   └── requirements.txt\n├── flask_back/       # Flask backend files\n│   ├── app.py\n│   ├── static/       # Static files for Flask (including frontend build)\n│   ├── templates/    # Flask templates\n│   └── requirements.txt\n├── myfrontend/       # Frontend source files\n│   ├── node_modules/\n│   ├── src/\n│   │   ├── App.svelte\n│   │   ├── app.css\n│   │   └── main.ts\n│   ├── package.json\n│   ├── package-lock.json\n│   ├── rollup.config.js\n│   ├── svelte.config.js\n│   └── tsconfig.json\n└── README.md\n```\n\n## Setup Steps\n\n### 1. Initialization\n\nCreate the main project directory and the frontend directory.\n\n```bash\nmkdir myproject \u0026\u0026 cd myproject\nmkdir myfrontend \u0026\u0026 cd myfrontend \u0026\u0026 npm init -y\n```\n\nUpdate `myfrontend/package.json`:\n- Set `\"type\": \"module\"`\n- Set `\"main\": \"src/main.ts\"`\n\nCreate frontend source files:\n\n```bash\nmkdir src \u0026\u0026 touch src/main.ts \u0026\u0026 touch src/app.css\n```\n\n### 2. Frontend Dependencies\n\nNavigate to `myfrontend` directory and install dependencies.\n\n**TypeScript:**\n\n```bash\nnpm install typescript --save-dev\nnpx tsc --init\n```\n\nEnsure `target` and `module` are set to `ESNext` in `tsconfig.json`.\n\n**Rollup \u0026 Plugins:**\n\n```bash\nnpm install rollup --save-dev\nnpm install --save-dev rollup-plugin-svelte @rollup/plugin-node-resolve @rollup/plugin-replace @rollup/plugin-typescript @rollup/plugin-terser\ntouch rollup.config.js\n```\n\n**Tailwind CSS:**\n\n```bash\nnpm install tailwindcss @tailwindcss/cli --save\n```\n\nAdd `@import \"tailwindcss\";` to `src/app.css`.\n\n**Svelte:**\n\n```bash\nnpm install svelte --save\nnpm install svelte-preprocess --save-dev\ntouch svelte.config.js\n```\n\nPopulate `svelte.config.js`, `src/App.svelte`, and `src/main.ts` as described in the tutorial or refer to the files in this repository.\n\n### 3. Virtual Environment (Recommended)\n\nCreate and activate a Python virtual environment (using Conda example):\n\n```bash\nconda create --yes --name myproject python=3.13 \u0026\u0026 conda activate myproject\n```\n\n### 4. Backend Setup\n\n**Django:**\n\n```bash\ncd .. # Move to myproject directory\nmkdir django_back \u0026\u0026 cd django_back\ntouch requirements.txt\necho \"Django==5.2\" \u003e requirements.txt # Use the latest version\npip install -r requirements.txt\ndjango-admin startproject mysite .\npython manage.py startapp myapp\nmkdir -p myapp/templates \u0026\u0026 touch myapp/templates/index.html myapp/templates/base.html\ntouch myapp/urls.py\nmkdir -p static/frontend/css static/frontend/js\n```\n\nConfigure `mysite/settings.py`, `mysite/urls.py`, `myapp/views.py`, `myapp/urls.py`, `myapp/templates/base.html`, and `myapp/templates/index.html` as per the tutorial or repository files.\n\n**Flask:**\n\n```bash\ncd .. # Move to myproject directory\nmkdir flask_back \u0026\u0026 cd flask_back\ntouch requirements.txt\necho \"Flask==3.1.0\" \u003e requirements.txt # Use the latest version\npip install -r requirements.txt\nmkdir templates \u0026\u0026 touch templates/index.html templates/base.html\ntouch app.py\nmkdir -p static/frontend/css static/frontend/js\n```\n\nConfigure `app.py`, `templates/base.html`, and `templates/index.html` as per the tutorial or repository files.\n\n### 5. Bridging Frontend and Backend\n\n**Rollup Configuration:**\n\nUpdate `myfrontend/rollup.config.js` to output bundled files to the correct backend static directory (`django_back/static/frontend/js` or `flask_back/static/frontend/js`). Refer to the `rollup.config.js` in this repository.\n\n**Package.json Scripts:**\n\nInstall `concurrently`:\n\n```bash\ncd ../myfrontend\nnpm install concurrently --save-dev\n```\n\nUpdate the `scripts` section in `myfrontend/package.json` to include build and development commands for both Tailwind and Rollup, targeting either the Django or Flask backend. Refer to the `package.json` in this repository for examples (`dev-django`, `prod-django`, `dev-flask`, `prod-flask`).\n\n## Running the Project\n\n### Django\n\n1.  **Build Frontend (Development):**\n    ```bash\n    cd myfrontend\n    npm run dev-django\n    ```\n    *(Keep this terminal running)*\n\n2.  **Run Django Server:**\n    Open a **new terminal**, activate the virtual environment, and navigate to `django_back`.\n    ```bash\n    cd ../django_back\n    # conda activate myproject (if needed)\n    python manage.py runserver 8090\n    ```\n    Access the app at `http://127.0.0.1:8090/`.\n\n3.  **Build Frontend (Production):**\n    ```bash\n    cd myfrontend\n    npm run prod-django\n    ```\n\n### Flask\n\n1.  **Build Frontend (Development):**\n    ```bash\n    cd myfrontend\n    npm run dev-flask\n    ```\n    *(Keep this terminal running)*\n\n2.  **Run Flask Server:**\n    Open a **new terminal**, activate the virtual environment, and navigate to `flask_back`.\n    ```bash\n    cd ../flask_back\n    # conda activate myproject (if needed)http://127.0.0.1:8000/blog/2025/04/12/svelte-tailwind-with-rollup-and-djangofastapi-as-the-backend\n    flask run --debug\n    ```\n    Access the app at `http://127.0.0.1:5000/` (or the port specified by Flask).\n\n3.  **Build Frontend (Production):**\n    ```bash\n    cd myfrontend\n    npm run prod-flask\n    ```\n\n## Conclusion\n\nThis setup provides a robust development environment combining the strengths of modern frontend tools with popular Python backends. Adjust configurations and versions as needed for your specific project requirements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flesi-nedo%2Fsample-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flesi-nedo%2Fsample-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flesi-nedo%2Fsample-project/lists"}