Full Stack Setup with Python

Issue

In the years past, I've always used Angular 1.x for my front end which was as simple as including a single JS file at the time. Now with the rise of TypeScript in Angular, React, and others, there's now a need for a dedicated NPM build serves which compiles the source into vanilla JavaScript before serving the front-end as an independent project. Please correct me if my understanding of this is in anyway flawed.

At the moment I use Django for all of my backend applications, particularly a REST framework that will enable the frontend to function as a SPA. I've taken a liking to Vue.js as my frontend weapon of choice. My question is (and please forgive me if it seems a bit too broad) how do I setup my project and configure it properly so that I'm not running two servers for both the frontend and backend?

Again, back in the days of Angular 1.x and vanilla JavaScript all I had to do was include a minified angular.js in my static files folder in the backend and the same goes for the standalone version of Vue. Now I'm just so confused what is what and how to properly setting up a full stack project. If you guys, could weigh in, I'd very much appreciate it. Thank you in advance!

npm run dev # running the frontend for Vue.js

manage.py runserver # and a Django DRF backend

Solution

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.

Answered By - Mani