Building A Full-Stack Web Application With Flask API And VueJS

This documentation will guide you through building a full-stack web application using Flask for the API backend and VueJS for the frontend user interface. Flask is a lightweight and flexible Python web framework, while VueJS is a progressive JavaScript framework known for its simplicity and reactivity. By combining these technologies, you can create efficient and responsive web applications.

Prerequisites:

Before you begin, make sure you have the following installed on your computer:

Python (3.6 or higher)

Node.js and npm (Node Package Manager)

Backend Setup: Flask API

Install Flask and required packages:

Open a terminal and run the following command to install Flask and other necessary packages.

pip install Flask Flask-SQLAlchemy

Create a basic Flask application:

Create a new file named app.py and set up a minimal Flask application.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello from Flask!'

Run the Flask application:

Save the changes in app.py and run the Flask app using the following command:

python app.py

The Flask app will be accessible at http://localhost:5000/.

Frontend Setup: VueJS

Install Vue CLI and create a new project:

Open a terminal and install Vue CLI using npm.

npm install -g @vue/cli

Create a new Vue project named frontend.

vue create frontend

Start the Vue development server:

Navigate to the frontend directory and start the Vue development server.

cd frontend

npm run serve

The Vue app will be accessible at http://localhost:8080/.

Connecting the Frontend to Backend

Enable CORS on Flask:

To allow the Vue app to communicate with the Flask API, we need to enable CORS (Cross-Origin Resource Sharing) on the Flask server. Install the flask-cors package.

pip install flask-cors

Modify the app.py file to enable CORS.

python

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# ... Existing routes and code …

Fetch data from Flask API:

In the VueJS app, open src/components/HelloWorld.vue and modify the template to fetch data from the Flask API.

vue

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch("http://localhost:5000/")
        .then((response) => response.text())
        .then((data) => {
          this.message = data;
        });
    },
  },
};
</script>

Display data from Flask API:

Save the changes in HelloWorld.vue, and you should see the message from the Flask API displayed on the VueJS app.

Conclusion:

Congratulations! You have successfully built a simple full-stack web application using Flask API and VueJS front end. This example demonstrates how to set up a basic connection between the backend and frontend to fetch and display data. With Flask and VueJS as your tools, you can explore various possibilities to create more complex and interactive web applications. Sreyas IT Solutions is always more than happy to assist you with many more challenging tasks. We are a leading software development company, proficient in custom software development. Happy coding!