Building a Flask‑Vue Word Cloud Application

Introduction Python has two major web frameworks, Django and Flask. This article shares a small, fun Flask‑based word‑cloud generation site that is suitable for practice, combining a Vue frontend with a Flask backend.

Directory Structure The project is split into backend (Flask service) and frontend (Vue UI). The top‑level layout looks like:

.
├── backend
│   ├── app
│   └── venv
└── frontend
    ├── README.md
    ├── build
    ├── config
    ├── dist
    ├── index.html
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── src
    └── static

Development Environment The author uses macOS Mojave with Node.js v11.6.0 and Python 3.7.4. Ensure Node.js is installed before proceeding.

Frontend Development

Install Vue CLI: npm install -g vue-cli Create the project directory: mkdir word-cloud && cd word-cloud Initialize a webpack‑based Vue project: vue init webpack frontend Install Element UI: npm i element-ui -S and import it in /src/main.js with import ElementUI from 'element-ui' and Vue.use(ElementUI).

Install Axios for HTTP requests: npm install --save axios and register it globally in /src/main.js via Vue.prototype.axios = axios.

Create WordCloud.vue containing a textarea, an image placeholder, and two buttons (generate and download). The template uses Element UI components such as el-input, el-image, and el-button.

Implement click handlers in the component’s script to post the textarea content to the Flask API and display the returned base64 image, as well as to download the image.

Update the router ( src/router/index.js) to map the root path to the WordCloud component.

Build the production assets with npm run build, which outputs to the dist folder.

Backend Development

Install Python 3 (using Homebrew) and create a virtual environment:

brew install python3
mkdir backend && cd backend
python3 -m venv venv
source venv/bin/activate

Install Flask and the word‑cloud library:

pip install flask
pip install wordcloud

In __init__.py configure Flask to serve the Vue build output:

app = Flask(__name__,
            template_folder="../../frontend/dist",
            static_folder="../../frontend/dist/static")

Define a helper to generate a word‑cloud image and return it as a base64 string:

def get_word_cloud(text):
    pil_img = WordCloud(width=800, height=300, background_color="white").generate(text=text).to_image()
    img = io.BytesIO()
    pil_img.save(img, "PNG")
    img.seek(0)
    img_base64 = base64.b64encode(img.getvalue()).decode()
    return img_base64

Create two routes: one for serving the index page and another for generating the word‑cloud image:

@app.route('/')
@app.route('/index')
def index():
    return render_template('index.html')

@app.route('/word/cloud/generate', methods=["POST"])
def cloud():
    text = request.json.get("word")
    res = get_word_cloud(text)
    return res

Run the Flask server with flask run. The backend will serve the Vue‑generated static files and expose the /word/cloud/generate API used by the frontend.

After completing both sides, the result is a functional full‑stack word‑cloud application that demonstrates basic front‑end/back‑end separation, dependency management, and deployment packaging.