Metadata-Version: 2.1
Name: django-simple-vite
Version: 1.0.0
Summary: A simple Django app to integrate Vite.js easily in your Django project.
Home-page: https://github.com/baxeico/django-simple-vite
Author: Augusto Destrero
Author-email: augusto@guguweb.com
License: MIT
Description: # 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!
        
Keywords: django,vitejs
Platform: UNKNOWN
Description-Content-Type: text/markdown
