Full-Stack Web Application with User-Triggered Async Job: Export as CSV using Redis and Celery

In this documentation, we will guide you through building a full-stack web application with a user-triggered async job to export data as a CSV file. Here we will use Flask for the API backend, VueJS for the frontend UI, Redis for caching, and Celery for background batch jobs. Thus this application will allow users to request data export, and the actual CSV generation will be done asynchronously using Redis and Celery.

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)
Redis server (installed and running)
Backend Setup: Flask API

Install Flask, Redis, and required packages:
Open a terminal and run the following commands to install Flask, Redis, and other necessary packages.

Copy code

pip install Flask Flask-Redis celery

Create a basic Flask application with a route for data export:

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

from flask import Flask, jsonify, request
from celery import Celery

app = Flask(__name__)

# Redis configuration
app.config['CELERY_BROKER_URL'] = 'redis://localhost:6379/0'
app.config['CELERY_RESULT_BACKEND'] = 'redis://localhost:6379/0'
celery = Celery(app.name, broker=app.config['CELERY_BROKER_URL'])
celery.conf.update(app.config)

# Celery task for CSV generation
@celery.task(bind=True)
def generate_csv_task(self, data):
    # Logic to generate CSV from data (example: data is a list of dictionaries)
    # ... (Implement CSV generation logic) ...
    return "path/to/generated/csv/file.csv"

# Flask route to trigger CSV export
@app.route('/api/export-csv', methods=['POST'])
def export_csv():
    data = request.json.get('data')  # Example: User sends data to be exported
    if data:
        task = generate_csv_task.apply_async(args=(data,))
        return jsonify({'message': 'CSV export started!', 'task_id': task.id}), 202
    else:
        return jsonify({'error': 'Data not provided!'}), 400

if __name__ == '__main__':
    app.run(debug=True)

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

Implement the user interface for triggering data export:

In the VueJS app, open src/App.vue and also modify the template to include a button for triggering CSV export.

<template>
  <div>
    <h1>CSV Export Example</h1>
    <button @click="exportCSV">Export as CSV</button>
  </div>
</template>

<script>
export default {
  methods: {
    exportCSV() {
      const dataToExport = [
        { id: 1, name: 'John Doe', email: '[email protected]' },
        { id: 2, name: 'Jane Smith', email: '[email protected]' },
        // Example: Data to be exported
      ];

      fetch('/api/export-csv', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ data: dataToExport }),
      })
        .then((response) => response.json())
        .then((data) => {
          alert(data.message);
          // Optionally, you can handle the CSV file path and provide a download link to the user
        })
        .catch((error) => {
          console.error('Error exporting CSV:', error);
        });
    },
  },
};
</script>

Asynchronous CSV Generation with Redis and Celery

Install Redis and start the server:

Make sure you have Redis installed and running. However, you can start the Redis server by running the Redis server in a terminal.

Install the Redis Python package for Celery:

Open a terminal and run the following command to install the Redis package for Celery.

Copy code

pip install redis

Run Celery Worker:

In a new terminal, navigate to the project directory and run the following command to start the Celery worker.

css

Copy code

celery -A app.celery worker –loglevel=info

Running the Full-Stack Application

Start the Flask Backend:

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

python app.py

Start the VueJS Frontend:

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

cd frontend

npm run serve

Access the Web Application:

Open a web browser and visit http://localhost:8080/. Now you will see the CSV Export button on the page.

Export as CSV:

Click the “Export as CSV” button to trigger the data export process. The Celery task will run in the background, and also the user will receive feedback on the progress.

Congratulations! You have successfully built a full-stack web application with a user-triggered async job to export data as a CSV file using Redis and Celery. Thus the Flask API allows users to request CSV export, and the Celery worker asynchronously generates the CSV file. The VueJS frontend also provides a simple user interface to trigger the CSV export and receive feedback on the process. Moreover, this example demonstrates the power of Redis and Celery for handling time-consuming tasks and delivering a smooth user experience in web applications.

Sreyas is a prominent software and mobile app development firm, boasting extensive expertise in UI/UX design. Our global presence allows us to offer a comprehensive range of services. Our services include data migration, database management, web hosting, infrastructure management, and more for clients worldwide.