A newsletter is a powerful tool for maintaining regular communication with your audience. It connects you with your subscribers, allowing you to share updates, news, and other valuable content directly to their inboxes. In this article, you’ll learn how to build a dynamic and interactive newsletter platform where subscribers can easily subscribe to your newsletter, and you, as the admin, can efficiently manage and send batch emails to all subscribed users. By the end of this guide, you will have a fully functional newsletter platform that leverages JavaScript for interactivity, Flask on the server side, and MongoDB for efficient data storage. ## Prerequisites To follow along in this article, you should meet the following requirements: - MongoDB installed on your machine — whether that’s [Linux](https://www.mongodb.com/docs/manual/administration/install-on-linux/), [Mac OS](https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/), or [Windows](https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-windows/) - Mongosh for interacting with your MongoDB instance — view the [instructions for installation](https://www.mongodb.com/docs/mongodb-shell/install/) - RabbitMQ installed on your machine for message brokering — view the [installation instructions for Debian and Ubuntu](https://www.rabbitmq.com/docs/install-debian#manual-installation), then [Windows](https://www.rabbitmq.com/docs/install-windows) and [MacOS](https://www.rabbitmq.com/docs/install-homebrew) using Homebrew - Gmail as the SMTP server for sending emails — in this case, [generate an app password](https://myaccount.google.com/apppasswords) to securely authenticate your application without using your Gmail account's primary password > The commands used in this tutorial are demonstrated on a Linux machine with an Ubuntu 22.04LTS distro. The code used in this tutorial can be found in [the GitHub repository](https://github.com/mercybassey/newsletter-javascript-flask-mongodb). ## Setting up the environment To begin, you must ensure MongoDB, Mongosh, and your RabbitMQ server are running. To achieve this, execute the following commands sequentially: ```bash sudo systemctl status mongod sudo systemctl status rabbitmq-server mongosh ``` If you have the following output, you are set: ```bash ● mongod.service - MongoDB Database Server Loaded: loaded (/lib/systemd/system/mongod.service; enabled; vendor preset: enabled) Active: active (running) since Tue 2024-06-04 16:47:23 WAT; 13h ago Docs: https://docs.mongodb.org/manual Main PID: 1305 (mongod) Memory: 259.0M CPU: 2min 8.508s CGroup: /system.slice/mongod.service └─1305 /usr/bin/mongod --config /etc/mongod.conf Jun 04 16:47:23 mercy systemd[1]: Started MongoDB Database Server. Jun 04 16:47:24 mercy mongod[1305]: {"t":{"$date":"2024-06-04T15:47:24.620Z"},"s":"I", "c":"CONTROL", "id":7484500, "ctx":"main","msg":"Environment variabl> ● rabbitmq-server.service - RabbitMQ Messaging Server Loaded: loaded (/lib/systemd/system/rabbitmq-server.service; enabled; vendor preset: enabled) Active: active (running) since Tue 2024-06-04 16:47:28 WAT; 13h ago Main PID: 781 (beam.smp) Tasks: 27 (limit: 9003) Memory: 125.1M CPU: 1min 55.438s CGroup: /system.slice/rabbitmq-server.service ├─ 781 /usr/lib/erlang/erts-12.2.1/bin/beam.smp -W w -MBas ageffcbf -MHas ageffcbf -MBlmbcs 512 -MHlmbcs 512 -MMmcs 30 -P 1048576 -t 5000000 -st> ├─ 866 erl_child_setup 65536 ├─1204 inet_gethost 4 └─1205 inet_gethost 4 Jun 04 16:47:19 mercy systemd[1]: Starting RabbitMQ Messaging Server... Jun 04 16:47:28 mercy systemd[1]: Started RabbitMQ Messaging Server. Current Mongosh Log ID: 665ff402cc42191d77a26a12 Connecting to: mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.6 Using MongoDB: 7.0.11 Using Mongosh: 2.2.6 For mongosh info see: https://docs.mongodb.com/mongodb-shell/ ------ The server generated these startup warnings when booting 2024-06-04T16:47:24.825+01:00: Using the XFS filesystem is strongly recommended with the WiredTiger storage engine. See http://dochub.mongodb.org/core/prodnotes-filesystem 2024-06-04T16:47:26.247+01:00: Access control is not enabled for the database. Read and write access to data and configuration is unrestricted 2024-06-04T16:47:26.247+01:00: vm.max_map_count is too low ------ test> ``` Next, go ahead and create a working directory and virtual environment, and then activate the virtual environment using the following commands: ```bash mkdir newsletter cd newsletter code . python3 -m venv .venv . .venv/bin/activate # For Mac/Linux OS .venv\Scripts\activate # For Windows OS ``` With the virtual environment activated, you’re now ready to install the libraries needed to develop your newsletter platform. To proceed, you’ll need to install the following libraries: - [Flask](https://flask.palletsprojects.com/en/3.0.x/) for handling the web server and routing - [Flask Mail](https://pypi.org/project/Flask-Mail/#files) for sending emails from your application - [PyMongo](https://pymongo.readthedocs.io/en/stable/) for interfacing with MongoDB, which you can use to manage subscriber data and persistent storage of newsletter content - [Celery](https://docs.celeryq.dev/en/stable/) for managing asynchronous tasks, such as sending batch emails Using the following command, you will have them installed in your virtual environment: ```bash pip install Flask Flask-Mail pymongo celery ``` Finally, in your working directory, create two directories called `static` and `templates`. These will serve as the locations for static files like CSS and HTML templates, essential for rendering your web application's front-end part. After that, create the following files: - `app.py`: This will serve as the main entry point for your Flask application, where you initialize your app and tie together the other components. - `config.py`: This file will contain all configuration settings for your application, such as MongoDB connection details, mail server configuration, and Celery broker connection alongside any other environment-specific variables. - `routes.py`: Here, you will define the routes (URLs) that your application will respond to. It will include functions to handle requests and responses, connecting URLs to Python functions. - `tasks.py`: This file will be used for defining background tasks that can be processed asynchronously — which is, in this case, to send emails. ## Creating the template With your environment set up, the next thing to do is develop the look of your newsletter platform. In the templates directory, create two HTML files — `admin.html` and `subscrbe.html`. In `admin.html`, add the following HTML markup: ```html Admin - Send Newsletter

Send Newsletter

``` And then add the following code in the `subscribe.html` file: ```html Subscribe to Newsletter

Subscribe to our Newsletter

``` In the `admin.html` and `subscribe.html` templates, add the following scripts respectively in the body tag: ```html ``` ```html ``` For the `admin.html` template, the script block ensures that the form submission for sending newsletters is handled asynchronously. When the admin form is submitted, the JavaScript intercepts this event to prevent a page reload. It then sends the form data to the server using the Fetch API. Upon success, it displays a message that emails are being sent, and this message clears after a few seconds. In case of an error during the form submission, it captures that error and displays an appropriate message to the admin. For the `subscribe.html` template, the script block ensures that the subscription process is similarly handled asynchronously. When a user submits their subscription details, the script prevents the default form submission to the server and instead sends the data using Fetch. The server's response is then displayed directly in the HTML. If the response indicates success, a confirmation message is shown, and if there is an error (such as the server responding that the email already exists in the database), the error message is displayed. Finally, create a `styles.css` file in your static folder and add the following styles: ```css @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap'); body { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #040100; } h1 { color: white; } form { background: #DB4918; padding: 30px 40px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; margin: 20px 0; } label { display: block; margin-bottom: 8px; font-weight: bold; color: white; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; } button { background: #DB8218; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-family: "Nunito", sans-serif; } button:hover { background: #DB6B18; } #response { margin-top: 20px; font-size: 16px; color: #28a745; } footer { text-align: center; padding: 20px; margin-top: 20px; font-size: 16px; color: #666; } ``` ## Creating the routes and tasks With the template set up, you are now ready to define the specific routes and background tasks that will drive the functionality of your newsletter platform. This involves mapping URLs to Python functions in your Flask application, which will handle form submissions, user interactions, and any other required processes. Additionally, you'll configure Celery tasks to handle asynchronous operations such as sending emails in batches. To begin, add the following in your `config.py`: ```python import os class Config: CELERY_BROKER_URL = 'amqp://guest:guest@localhost//' RESULT_BACKEND = 'mongodb://localhost:27017/celery_results' MAIL_SERVER = 'smtp.gmail.com' MAIL_PORT = 587 MAIL_USE_TLS = True MAIL_USERNAME = '' # Your email address without the '@gmail.com' MAIL_PASSWORD = '' MAIL_DEFAULT_SENDER = '' ALLOWED_IPS = ['127.0.0.1'] MONGO_URI = 'mongodb://localhost:27017/newsletter' ``` Here you are setting up the configuration for your Flask application. This configuration includes the settings for Celery to connect to its message broker (RabbitMQ in this case, indicated by the AMQP URL) and MongoDB for the results back end. You're also configuring Flask-Mail with Gmail as the SMTP server to handle outgoing emails, which requires the mail server details, port, and secure connection preferences, along with your Gmail credentials. The `MAIL_DEFAULT_SENDER` is used as the default sender email address for your outgoing emails. Additionally, `ALLOWED_IPS` is specified for an extra layer of security, limiting access to certain functionalities based on the requester's IP address. Lastly, the `MONGO_URI` sets the connection string to your MongoDB database, where subscriber information and other data relevant to your newsletter system will be stored. Next, in your `routes.py` file, add the following code snippets: ```python from flask import render_template, request, abort, jsonify from app import app, db from tasks import send_emails @app.before_request def limit_remote_addr(): if 'X-Forwarded-For' in request.headers: remote_addr = request.headers['X-Forwarded-For'].split(',')[0] else: remote_addr = request.remote_addr if request.endpoint == 'admin' and remote_addr not in app.config['ALLOWED_IPS']: abort(403) @app.route('/') def home(): return render_template('subscribe.html') @app.route('/admin') def admin(): return render_template('admin.html') @app.route('/subscribe', methods=['POST']) def subscribe(): first_name = request.form['firstname'] last_name = request.form['lastname'] email = request.form['email'] if db.users.find_one({'email': email}): return """

✖ This email is already subscribed!

""", 409 db.users.insert_one({'firstname': first_name, 'lastname': last_name, 'email': email, 'subscribed': True}) return """

✔ Subscribed successfully!

""", 200 @app.route('/send-newsletters', methods=['POST']) def send_newsletters(): title = request.form['title'] body = request.form['body'] subscribers = list(db.users.find({'subscribed': True})) for subscriber in subscribers: subscriber['_id'] = str(subscriber['_id']) send_emails.apply_async(args=[subscribers, title, body]) return jsonify({'message': 'Emails are being sent!'}), 202 ``` The code snippet above establishes the essential routes and functionalities for your newsletter platform. The `limit_remote_addr` function restricts access to the admin interface based on IP address to enhance security. The `/subscribe` endpoint handles user subscriptions by checking for duplicate entries before saving new subscriber data to MongoDB. The `/send-newsletters` route triggers asynchronous email dispatch to subscribers using Celery, allowing for non-blocking operations and immediate feedback to the user that emails are being sent. In your `tasks.py`, add the following code snippets: ```python from flask_mail import Message from app import app, mail, db, celery from datetime import datetime @celery.task(bind=True) def send_emails(self, subscribers, title, body): with app.app_context(): for subscriber in subscribers: try: print(f"Sending email to {subscriber['email']}") msg = Message(title, recipients=[subscriber['email']]) msg.body = body mail.send(msg) db.deliveries.insert_one({ 'email': subscriber['email'], 'title': title, 'body': body, 'delivered_at': datetime.utcnow() }) print("Email sent") except Exception as e: print(f"Failed to send email to {subscriber['email']}: {str(e)}") return {'result': 'All emails sent'} ``` This will set up a Celery task that handles the sending of emails asynchronously. When the `send_emails` task is called, it iterates through each subscriber, composing and sending an email using Flask-Mail. For each successful email sent, the details are logged into the MongoDB `deliveries` collection with the recipient's email, email title, body, and the timestamp of when it was sent. If an error occurs during the email-sending process, it is caught and logged, which ensures that Celery handles failures and maintains a record of all email transmission attempts. Finally, in your `app.py`, add the following code snippets: ```python from flask import Flask from flask_mail import Mail from pymongo import MongoClient from celery import Celery app = Flask(__name__) app.config.from_object('config.Config') mail = Mail(app) client = MongoClient(app.config['MONGO_URI']) db = client.get_database() celery = Celery(app.name, broker=app.config['CELERY_BROKER_URL']) celery.conf.update(app.config) from routes import * from tasks import * if __name__ == '__main__': app.run(debug=True) ``` This will initialize your Flask application using configurations loaded from your configuration file. It sets up Flask-Mail for email functionality, connects to MongoDB using PyMongo, and configures Celery with the specified broker from the configuration file. Then, the routes and tasks are imported to integrate endpoint definitions and background task functions into the app. Additionally, it runs the application in debug mode to allow for real-time debugging and development, making it easier to track down issues as they arise. ## Testing the application Everything is all set up for your newsletter platform. Now, it's time to see how it works. To start your Flask application, navigate to your project directory in the terminal and execute the following command: ```bash flask --app app run ``` On another terminal window, execute the following command to start the celery worker: ```bash celery -A app.celery worker --loglevel=info ``` To access your newsletter platform, navigate to *localhost:5000* on your web browser. You will see the initial landing page as depicted below: ![Viewing newsletter landing page][1] For administrative functions, visit the admin page at *localhost:5000/admin*. The page should look like this: ![Viewing the newsletter admin page][2] To test your application, subscribe via the homepage. You can add as many subscribers as you wish. Upon successful subscription, you should see a confirmation similar to this: ![Adding a subscriber][3] The form will clear and a success message will be displayed. To verify the subscription data, use the following MongoDB commands in your terminal: ```bash mongosh show dbs use newsletter show collections ``` You should see that a database named *newsletter* has been created along with a *subscribers* collection containing the subscription entries: ```bash Current Mongosh Log ID: 666151bb5bb9f923c2a26a12 Connecting to: mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.6 Using MongoDB: 7.0.11 Using Mongosh: 2.2.6 For mongosh info see: https://docs.mongodb.com/mongodb-shell/ ------ The server generated these startup warnings when booting 2024-06-06T06:44:55.413+01:00: Using the XFS filesystem is strongly recommended with the WiredTiger storage engine. See http://dochub.mongodb.org/core/prodnotes-filesystem 2024-06-06T06:44:56.369+01:00: Access control is not enabled for the database. Read and write access to data and configuration is unrestricted 2024-06-06T06:44:56.369+01:00: vm.max_map_count is too low ------ test> show dbs admin 40.00 KiB config 60.00 KiB local 72.00 KiB newsletter 40.00 KiB test> use newsletter switched to db newsletter newsletter> show collections subscribers newsletter> db.subscribers.find().pretty() [ { _id: ObjectId('66614cf25c0255f4a797fe97'), firstname: 'Mercy', lastname: 'Udoh', email: 'mercybassey683@gmail.com', subscribed: true } ... ] newsletter> ``` Next, to send batch emails, go to your admin page at *localhost:5000/admin* and dispatch a newsletter. Your Celery backend should log the following upon successful email dispatch: ```bash [2024-06-06 13:34:37,304: WARNING/ForkPoolWorker-4] Email sent [2024-06-06 13:34:37,305: INFO/ForkPoolWorker-4] Task tasks.send_emails[b119bb9e-b2ef-4c85-b048-ca96e0e60ae1] succeeded in 17.155154566993588s: {'result': 'All emails sent'} ``` Confirm the creation of the `deliveries` collection alongside `subscribers` in your MongoDB database: ```bash newsletter> show collections deliveries subscribers newsletter> ``` To review the contents of the `deliveries` collection and verify the details of the emails sent, use the following command in your MongoDB shell: ```javascript db.deliveries.find().pretty() ``` This command will display the records in the *deliveries* collection in a formatted manner, allowing you to easily review each entry. You should see data similar to the following output, which includes details such as email address, title of the newsletter, body content, and the timestamp of when each email was sent. ```javascript newsletter> db.deliveries.find().pretty() [ { _id: ObjectId('6661acdd5d0b93accd9fba1e'), email: 'mercybassey683@gmail.com', title: 'Green Thumbs Monthly: June Garden Tips & Upcoming Events', body: 'Dear Green Thumbs Members,\r\n' + '\r\n' + "Welcome to your June edition of the Green Thumbs Monthly! As the days grow longer and the soil warms, it’s the perfect time to dive deep into the joys of summer gardening. Here's what's inside this issue:\r\n" + '\r\n' + '1. Member Spotlight:\r\n' + 'This month, we’re featuring Jane Doe, who has transformed her backyard into a vibrant oasis of native plants and vegetables. ', delivered_at: ISODate('2024-06-06T12:34:37.237Z') } ] newsletter> ``` This ensures you can track the success and content of each dispatch within your newsletter system. ## Conclusion And there you have it! You've created a powerful and interactive newsletter platform. This project not only allowed you to deepen your understanding of Python, JavaScript, Flask, and MongoDB but also gave you a glimpse of how these technologies intertwine to create a functional web application. As you admire your creation, remember that this is just the beginning. You can continue to enhance this platform with more features like automated responses, analytics integration to track subscriber engagement, and customizable email templates. The beauty of creating is that it's never truly finished. There's always something more to add, to improve, and to innovate. So, keep exploring, keep learning, and most importantly, keep creating. Want to continue the conversation? If you have questions or want to connect with other folks building cool things with MongoDB, head to our [Developer Community](https://www.mongodb.com/community/forums/) next. [1]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt81f7bbf237585b92/667d36d0f89b626b8590aa3c/Untitled.png [2]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/bltb96bcbf571a00162/667d368e8a80d19535add099/Untitled_1.png [3]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt18164e4228268bc9/667d36d0b2a2af70d8a6ae6c/Untitled_2.png

Mercy Bassey

Content by Mercy Bassey

Build a Newsletter Platform With Flask and MongoDB

Ensuring High Availability for MongoDB on Kubernetes