[Answered ]-Full Stack Setup with Python

If you want to do a full-featured VueJS project with webpack template, here is what you can do: Run server and client apps on separate ports, and proxy all server requests (like APIs) using proxyTable in webpack config.

Here are the detailed steps:

Step 1: Create your usual Python server (or any other server that serves APIs, static files, etc.) in a separate folder / terminal window. Let’s say it runs on port 8080. So, your development server is available at http://localhost:8080 which also hopefully serves some api requests.

Step 2: Create your VueJS project in a different folder (preferably using webpack template). When you run npm run dev, your client app will be available at http://localhost:4200 (default webpack setup). Do not start your client app yet, till you finish Step 3 below.

Step 3: Now open the config file: VueJS_Webpack_Project_Folder/config/index.js and setup proxyTable as follows:

...
...
module.exports = {
    build: {...},
    dev: {
        ...,
        port: 4200,
        ...,
        proxyTable: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true
            },
            '/static': {
                target: 'http://localhost:8080',
                changeOrigin: true
            }
        },
        ...
    }
}
...

As you can see above, all requests going to /api and /static are redirected to server. This is just an example, you can proxy more requests that are relevant for your setup.

You can also change the port if your server is running on 4200 or if you have multiple VueJS apps in your dev setup.

Step 4: Now you can finally start your Python server (your development server) and webpack server (VueJS client app) and do your regular development.

EDIT: Final steps to deploy app

After you are done with development, when you finally run npm run build, it will create a dist folder within your VueJS project setup, containing the minified build files like vendor.hash.js, app.hash.js, etc.

You will need to copy these build files to the right folders within your Django server setup. Either you may do this step manually, or simply write a python script that removes old build files and copies new build files into the right folders.

EDIT 2: Explaining the reasons for the above setup

The reason we have to do all the complicated steps above is because of the following:

1. Today we may use Django. Tomorrow we may change the server side technology to something else, or may even go serverless. To ensure that our client app is not affected during this migration process, it is in our best interest to keep it independent.

2. Server and client have different roles: Server handles the databases, APIs, user sessions, authentication, etc. Client App focuses only on having the right user experience. Therefore it helps to separate these environments.

3. VueJS with webpack template is a very powerful way to do VueJS development. You get to change code and view results immediately in browser without even having to refresh. You get detailed error logs or warnings that allow you to fix bugs immediately without having to do a full build. The development cycle gets shortened significantly when you use VueJS + webpack. The only way to get it working properly is by having it as a stand-alone project.

And some non-technical reasons:

1. Keeping separate client helps in splitting work in future. In a small project, the single developer may do both client and server development. Later when the project becomes a big success, a separate team will handle the server, and a different team will handle the client app. Having it coupled will lead to a lot of synchronization issues.

2. And finally, when you have a big revenue-generating project eventually, you don’t get developers with Django + VueJS skillset. Developers (unlike tech founders) focus on one particular technology at a time. When you have two different projects that fully conform to the regular development processes, your team can ramp up fast and get things done quickly.