django-simple-vite


Namedjango-simple-vite JSON
Version 1.0.0 PyPI version JSON
download
home_pagehttps://github.com/baxeico/django-simple-vite
SummaryA simple Django app to integrate Vite.js easily in your Django project.
upload_time2023-03-16 13:41:24
maintainer
docs_urlNone
authorAugusto Destrero
requires_python
licenseMIT
keywords django vitejs
VCS
bugtrack_url
requirements No requirements were recorded.
Travis-CI No Travis.
coveralls test coverage No coveralls.
            # django-simple-vite

A simple Django app to integrate Vite.js easily in your Django project.


## Install:

```
pip install django-simple-vite
```

Then add `simple_vite` to `INSTALLED_APPS` in Django settings.

```
INSTALLED_APPS = [
    ...
    'simple_vite',
    ...
]
```

## Settings:

During development, set `VITE_SERVER_URL` in Django settings, pointing to the Vite.js development server, e.g.:

```
VITE_SERVER_URL = 'http://localhost:3000'
```

When in production, you don't need to set `VITE_SERVER_URL`, because the compiled assets produced by Vite.js will be served as regular static files.

## Usage:
------

Create an app that will contain your Vite.js powered frontend:

```
./manage.py startapp frontend
```

Inside your app, create a `vite_src` directory (the name is arbitrary). This directory will contain your Javascript sources, that will be compiled by Vite.js.

In the `vite_src` directory, create a `vite.config.js` file, with this content:

```
const { resolve } = require('path');

export default {
    build: {
        manifest: true, // adds a manifest.json
        rollupOptions: {
            input: [
              // Use main.js file as entrypoint for your JS app.
              resolve(__dirname, './main.js'),
            ]
        },
        // Puts the Vite.js manifest.json in
        // PROJECT_ROOT/frontend/static/
        outDir:  '../static',
        // puts compiled asset files (js, css) in
        // PROJECT_ROOT/frontend/static/frontend
        assetsDir:  'frontend',
    },
    plugins: [],
    server: {
        // This port should match with VITE_SERVER_URL Django setting.
        port: 3000,
        open: false,
    }
};
```

In the `vite_src` directory, create a `main.js` file, that will serve as entry point for your app, with this content:

```
// Add this at the beginning of your app entry.
import 'vite/modulepreload-polyfill';
import 'main.css';

console.log("hello world");
```

`main.css` is a CSS file that will be imported by Vite and used by your application.

Install Vite.js in your `vite_src` directory:

```
yarn add vite
```

Add a couple of script in your `package.json`:

```
{
  "dependencies": {
    "vite": "^4.1.4"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}
```

Launch Vite.js server:

```
yarn dev
```

Create a Django template `index.html` that will hold the HTML markup used by your application, save it inside your `frontend` Django app in a subdirectory `templates/frontend/`.

```
{% load vite %}

<html>
<head>
    {% vite_styles 'main.js' %}
</head>
<body>
    <h1>Hello world</h1>

    {% vite_scripts 'main.js' %}
</body>

</html>
```

Now create a Django URLConf that will serve the above template, and you'll see a basic Vite.js powered web app, with Hot Module Replacement (HMR) enabled!



            

Raw data

            {
    "_id": null,
    "home_page": "https://github.com/baxeico/django-simple-vite",
    "name": "django-simple-vite",
    "maintainer": "",
    "docs_url": null,
    "requires_python": "",
    "maintainer_email": "",
    "keywords": "django,vitejs",
    "author": "Augusto Destrero",
    "author_email": "augusto@guguweb.com",
    "download_url": "https://files.pythonhosted.org/packages/60/70/62a0eabf4db4396853869181dbe2d4d22d3bc9bd8ba70284fae1f8d2c5d3/django-simple-vite-1.0.0.tar.gz",
    "platform": null,
    "description": "# django-simple-vite\n\nA simple Django app to integrate Vite.js easily in your Django project.\n\n\n## Install:\n\n```\npip install django-simple-vite\n```\n\nThen add `simple_vite` to `INSTALLED_APPS` in Django settings.\n\n```\nINSTALLED_APPS = [\n    ...\n    'simple_vite',\n    ...\n]\n```\n\n## Settings:\n\nDuring development, set `VITE_SERVER_URL` in Django settings, pointing to the Vite.js development server, e.g.:\n\n```\nVITE_SERVER_URL = 'http://localhost:3000'\n```\n\nWhen in production, you don't need to set `VITE_SERVER_URL`, because the compiled assets produced by Vite.js will be served as regular static files.\n\n## Usage:\n------\n\nCreate an app that will contain your Vite.js powered frontend:\n\n```\n./manage.py startapp frontend\n```\n\nInside your app, create a `vite_src` directory (the name is arbitrary). This directory will contain your Javascript sources, that will be compiled by Vite.js.\n\nIn the `vite_src` directory, create a `vite.config.js` file, with this content:\n\n```\nconst { resolve } = require('path');\n\nexport default {\n    build: {\n        manifest: true, // adds a manifest.json\n        rollupOptions: {\n            input: [\n              // Use main.js file as entrypoint for your JS app.\n              resolve(__dirname, './main.js'),\n            ]\n        },\n        // Puts the Vite.js manifest.json in\n        // PROJECT_ROOT/frontend/static/\n        outDir:  '../static',\n        // puts compiled asset files (js, css) in\n        // PROJECT_ROOT/frontend/static/frontend\n        assetsDir:  'frontend',\n    },\n    plugins: [],\n    server: {\n        // This port should match with VITE_SERVER_URL Django setting.\n        port: 3000,\n        open: false,\n    }\n};\n```\n\nIn the `vite_src` directory, create a `main.js` file, that will serve as entry point for your app, with this content:\n\n```\n// Add this at the beginning of your app entry.\nimport 'vite/modulepreload-polyfill';\nimport 'main.css';\n\nconsole.log(\"hello world\");\n```\n\n`main.css` is a CSS file that will be imported by Vite and used by your application.\n\nInstall Vite.js in your `vite_src` directory:\n\n```\nyarn add vite\n```\n\nAdd a couple of script in your `package.json`:\n\n```\n{\n  \"dependencies\": {\n    \"vite\": \"^4.1.4\"\n  },\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}\n```\n\nLaunch Vite.js server:\n\n```\nyarn dev\n```\n\nCreate a Django template `index.html` that will hold the HTML markup used by your application, save it inside your `frontend` Django app in a subdirectory `templates/frontend/`.\n\n```\n{% load vite %}\n\n<html>\n<head>\n    {% vite_styles 'main.js' %}\n</head>\n<body>\n    <h1>Hello world</h1>\n\n    {% vite_scripts 'main.js' %}\n</body>\n\n</html>\n```\n\nNow create a Django URLConf that will serve the above template, and you'll see a basic Vite.js powered web app, with Hot Module Replacement (HMR) enabled!\n\n\n",
    "bugtrack_url": null,
    "license": "MIT",
    "summary": "A simple Django app to integrate Vite.js easily in your Django project.",
    "version": "1.0.0",
    "split_keywords": [
        "django",
        "vitejs"
    ],
    "urls": [
        {
            "comment_text": "",
            "digests": {
                "blake2b_256": "0c38c112586541e19563a73d2c4db8b8e3b433598947083f6e2b174a6ed1fcdd",
                "md5": "40f812a47b69a0739ce418de3eeddea8",
                "sha256": "c775f117650591128bae88ab7343f7bbd2e3833fbc7284820172c1f77f5addac"
            },
            "downloads": -1,
            "filename": "django_simple_vite-1.0.0-py3-none-any.whl",
            "has_sig": false,
            "md5_digest": "40f812a47b69a0739ce418de3eeddea8",
            "packagetype": "bdist_wheel",
            "python_version": "py3",
            "requires_python": null,
            "size": 4723,
            "upload_time": "2023-03-16T13:41:22",
            "upload_time_iso_8601": "2023-03-16T13:41:22.142763Z",
            "url": "https://files.pythonhosted.org/packages/0c/38/c112586541e19563a73d2c4db8b8e3b433598947083f6e2b174a6ed1fcdd/django_simple_vite-1.0.0-py3-none-any.whl",
            "yanked": false,
            "yanked_reason": null
        },
        {
            "comment_text": "",
            "digests": {
                "blake2b_256": "607062a0eabf4db4396853869181dbe2d4d22d3bc9bd8ba70284fae1f8d2c5d3",
                "md5": "da97af75155c889562c4432b1df5df9e",
                "sha256": "b41f5c479209e7d712afb9f83757bc415d3cd05f7f0ec42304411667377012b0"
            },
            "downloads": -1,
            "filename": "django-simple-vite-1.0.0.tar.gz",
            "has_sig": false,
            "md5_digest": "da97af75155c889562c4432b1df5df9e",
            "packagetype": "sdist",
            "python_version": "source",
            "requires_python": null,
            "size": 4613,
            "upload_time": "2023-03-16T13:41:24",
            "upload_time_iso_8601": "2023-03-16T13:41:24.285445Z",
            "url": "https://files.pythonhosted.org/packages/60/70/62a0eabf4db4396853869181dbe2d4d22d3bc9bd8ba70284fae1f8d2c5d3/django-simple-vite-1.0.0.tar.gz",
            "yanked": false,
            "yanked_reason": null
        }
    ],
    "upload_time": "2023-03-16 13:41:24",
    "github": true,
    "gitlab": false,
    "bitbucket": false,
    "github_user": "baxeico",
    "github_project": "django-simple-vite",
    "travis_ci": false,
    "coveralls": false,
    "github_actions": false,
    "circle": true,
    "lcname": "django-simple-vite"
}
        
Elapsed time: 0.99965s