Forem: Hiteshpandey

A go through of prismic implementation journey for a tutorial site on vue js

Hiteshpandey — Sun, 17 Aug 2025 08:33:53 +0000

This post is an overview of how you can approach a site that you want to build using Prisimc service integration, so this would be less of a technical code implementation walthrough and more of a go through of how we planned and diverted from implementing our site so you can take some cues from it. I am going to refer the site built on the same platform that is the Pepipost tutorials section (specifically the tutorial section) you can check it out here since that was the project I will be referencing.

And before the article continues, I want to make clear that I am not specifically an expert on these technologies, this will be a big note on how I was trying to implement this an how I found certain things that work and my trials with Vue js, cause this was the first time I was Implementing it. With these points in mind let's go forward with the journey.

Prismic Platform:

So first things first. What is the scenario we would be using Prismic?
Basically, if you want a centralized control for all of your content independent of your system and want to provide access to multiple users to anyone in the world Prismic is your answer. It is an online service you can use as an independent CMS.
So we had the same requirement and wanted our tutorials to be editable by anyone posting it and the posts that can be posted by anyone by any external contributors.

What about WordPress?

Well, we do have our site on WordPress and did have our tutorial section on that, but we wanted the new framework to be malleable to our campaigns that we will be posting on our site. Also, we wanted the site to be faster, Seo optimized and to be compatible with google crawler. So with that, here comes our second scenario.

Framework and language:

Second is the language and framework we want this to be built in. In the initial phases of planning and deployment, because Prismic allows unlimited calls to the API on the free plan, we thought it will be a really good idea to use a frontend framework and since I didn't have much experience in front end framework other than Vue, I took it forward as our main framework for the project to be built in.

Searching and ordering:

Initially, we had decided to use Algolia as our search service but since prismic provides us the search API through queries we decided to stick with it.

Vue integration with prismic:

Prismic API services use GraphQL format for sending queries in order to customize the API calls according to our needs. If you are building a system from scratch it provides detailed documentation about the API requests on the many frameworks and languages yes on js and on Vue js too.
But if you are a beginner like me or you don't want to waste time setting up the API and structuring the framework you can use the Vue starter kit in case you want a quick headstart.

SEO optimization:

Here is where we faced one of the challenges with Vue since it renders the content after the Prismic API call we can see that there is a loading time for the contents on the pages.
And google crawls that so on the SEO point of view we had failed to generate any meaningful content on google crawl. Our site was fast and google was ranking it but the content was missing. This would cause your site traffic to fall drastically.
- The first thing you will say that adding a loader on the page will help with this. Yes and No. Yes it will look like the content is loading to the user, but the google crawler won't wait for the page content to load, it crawls the page the instant it is loaded.
- Also the page title, description and other meta tags are set dynamically from the API response they won't be set properly.
- You see, in case of a static site the content is readily available at the time of load since no latency is there fetching the content.
Since we had spent so much time integrating and implementing this project, we cannot turn back to a backend implementation with a database that will require us to sync data to the SQL regularly in case of content which will take a lot of time to build. The solution to this will be discussed in the next section.

Server side rendering:

This was a lifesaver for us. You can use Nuxt.js to implement the server-side rendering you can check it out here. It provides a well-structured code frame on which you can develop your Vue js applications.
Due to server constraints and since it was going on our live server where many services reside we used the Prerendering as a solution to our newfound limitations.

Prerendering

Prerendering is a process in which the server creates static html copies of the site's dynamic pages by literally loading the page in a browser and copying the loaded html code from it. After this, you will route the site URL to hit the main index page of the generated html directory which is by default named dist and you are ready to use this generated html pages as your static site.
What do we require for prerendering:
- NodeJs - To use the prerenderer library you have to install this since it is a NodeJs library.
- PrerenderSpaPlugin - You need to install this using npm
After you install necessary libraries, you need to add all of the Routes you need to be rendered in an array structure. Manually yes. If you have to figure it out if you want to add it dynamically.
After that there are certain lists of things you need to keep in mind:
- Prerendering takes server resources you can make it such that the static web pages are built on one server and then pull it on another server to update the content or to add new pages.
- If you will be adding new pages routes all the time (since it is a tutorial site), you need to make changes to the vue config file.
- Change Timeout to 0 - Since it will take a long time to render all of the routes you will be updating, it is sure to time out after some time.
- Enable headless mode - Since we want this to happen internally without opening the chrome browser UI on the server
- Set Concurrent execution to a limited number - Else your server will not be able to handle the number of concurrent processes and the main process will die.

Disabling JS Scripts

Please keep in mind to remove the js script while rendering the page where it is not required, since what will happen is that the page will load with the static content once and then the latent script once loaded and active will call the Prismic API again to load the page which doesn't look nice.
- You can do this by using a regex pattern to identify starting and closing script tags and removing it from the buffered html.
- You can do this on certain routes by filtering the routes by the renderedRoute parameter

After the set up is done, we build the npm pages and were able to see a fast, SEO friendly site powered by vue and prismic. Let me inform this is not a perfect setup and more work has to be done to make it seamless and less manual interaction. But for now, for what time we had we are using this setup for our needs.

Hope you all can take something out of it and plan your setup better in order to integrate prismic or other platform with your Vue setup.

How does email bounce work in Mautic

Hiteshpandey — Thu, 26 Mar 2020 09:29:21 +0000

Mautic being an opensource marketing solution provides you with various features such as email organization through segmentation and sending targeted emails through campaigns with email monitoring. In order to comprehend the impact of your campaign, you need to track how much of your sent emails are being successfully sent and how many emails are being dropped. You can do this by checking bounced emails in your campaign.

Why do emails get bounced?

Reasons for getting an email bounce notification can be many; from email address being changed, a domain has changed, the recipient's mailbox is full, etc.

Types of email bounces:

Hard Bounces:- A hard bounce of an email is caused by permanent non-deliverable conditions such as the recipient's email address is missing or invalid. Many other reasons for a hard bounce to occur are the non-existence of the recipient’s domain, unknown recipient, error in typing the recipient’s email address, blocking of your email server by the recipient’s email server, or any kind of network glitch at the recipient’s end.
Soft Bounces:- If an email message is able to find the recipient’s email server and recognize the address, but it is not delivered to the recipient’s inbox and bounced back before delivery, it is classified as a "Soft Bounce." The reasons might include: the recipient’s inbox is full, the recipient's email server is down for some reason, or the email box is abandoned by the user.

With this, we can go forward with setting up email bounce filtration in Mautic.

Step 1: Install and enable php-imap extension

If you haven't yet installed the php-imap extension please follow these instructions for the installation:

Install php-imap

$ sudo yum install php-imap // For centos \ RHEL
$ sudo apt-get install php7.0-imap // For ubuntu

Enable the extension

$ vim /etc/php.ini

Uncomment or Add these lines

extension=imap.so
extension=curl.so

Restart the HTTP server

$ service restart httpd\apache // For apache
$ service restart nginx // For nginx

Step 2: Setup Monitored Inbox Settings

Since now we have our PHP IMAP extension enabled we can move onward towards setting up our IMAP inbox with Mautic.

Login to the Mautic panel
Click on the [cogwheel icon] > [Configuration] > [Email Settings]
Set these credentials:

Monitored address - The email address you are going to use

IMAP host - The IMAP enabled email server's hostname

Port - Email server connection port [usually 993]

Encryption - Message encryption [usually SSL]

IMAP username - User name of your email account

IMAP password- Password of your email account

Click on [Test connection and fetch folders] to test the connection and populate the Folders from your email server.

Bounces - Select the bounces folder from which Mautic will be reading bounce notifications from. This can be set as the Inbox folder of your email directory or you can filter your bounce notifications to the Bounce folder which will be a cleaner way to handle this.

You can use Use custom connection settings? option too, for setting up different email addresses for different Requests.

Note:- By any reason you are not being able to see the Monitored Inbox Settings you can do two things to fix this

Check the php imap option is enabled in the php.ini file or not
Delete the Mautic cache folder and reload the page

// Mautic cache folder
/mautic_setup_path/app/cache/

Step 3: Setup Cron (If using IMAP)

Edit the Cron file and put the following Cron in it.

$ crontab -e

* * * * * php /path/to/mautic/app/console mautic:email:fetch

Step 4: Create a segment for bounce emails

Open Segments section in Mautic
Create a new segment named Bounce emails
In the Filters section, Select [Bounced - Email] option apply equals operator and set it to yes save this segment This segment will be updated when mautic:segments:update Cron is executed

Step 5: Enable Bounce Forwarding

After you set your IMAP server settings, Mautic would be checking for bounce notification emails in your specified directory. To receive these bounce notification emails, you might have to enable this in your email service providers panel.

All you have to do is set the email id which you have specified in the Monitored Inbox Settings to be forwarded the bounce email notifications.

In case you don't want to do that or your email service provider doesn't allow the kind of VERP format (more on that later), you can use the webhooks of your email service provider which is discussed in the next step

Step 6: Set the webhook to the Mautic mailer callback URL (Optional if you are using IMAP)

Depending upon the service provider you use you will have to set the webhook to the Mauitc callback URL.

The callback URL would look something like this:

http://<mautic_installation_domain>/mailer/{service-provider-name}/callback

Similar to the IMAP settings you can use this callback URL as a webhook in order to detect bounced emails. In this case, your email service provider provides information about the bounced emails through the webhook endpoint. Refer this section to know more about this.

If you are using a custom SMTP service that is not mentioned in the Email service list provided in the [Mail Send Settings] panel, you will not be able to use this. Regardless of that, if you have no problem with the setup until Step 5, you will be able to detect and interact with the bounced email ids into the Bounce segment.

Process

For IMAP inbox: Mautic uses the configured IMAP mail configuration to detect the Bounced email notifications. This is done by the execution of this Cron mautic✉️fetch

Mautic uses VERP Variable Envelope Return Path (VERP) to detect emails Return-Path header to check for the bounced email which normally is the from-address you are sending from, which is modified by Mautic
The format Mautic expects the return-path should be is

youremail+bounce_receiver-email-id@your-domain.com

When an email is bounced it is sent back with the Return-Path header
Mautic then uses this detail to set the contact as bounced email.
The bounce segment that is created by the user is then updated by the contacts that are marked as bounced. This is done after the execution of the Cron mautic:segments:update

I hope this helps clear some doubts about the bounce email handling in the Mautic service setup.

You can check the original post here - https://pepipost.com/tutorials/mautic-bounce-management/

A quick guide on Mautic installation for Ubuntu 18.04

Hiteshpandey — Wed, 25 Mar 2020 05:53:26 +0000

Mautic is one of the popular free open-source Marketing automation applications which can be used for multiple use cases of marketing paradigm. It ranges from sending bulk emails by uploading an Email list, Scheduling and Creating campaigns, Sending SMS and User journey.
This will be a quick detour on how you can set up Mautic service on your brand new server setup from scratch. But before that, here are some of the basic system requirements:

PHP 5.6.19 + (Magic Quotes GPC off)
MySQL 5.5.3 + (InnoDB support required)
Apache / Nginx
An SMTP service provider like Pepipost

You can check Mautic's official requirements page here

After confirming to these requirements you can now begin with the installation

Installation

Step 1: Enter into the root directory of your remote server

$ cd var/www/html/

Step 2: Create a new directory named Mautic

$ sudo mkdir mautic
$ cd mautic

Step 3: Download the Mautic production file package

To download Mautic at your local machine click here
Fill your credentials and click on the download button
The downloaded file would be named something like this 2.16.0.zip

Step 4: Copy the zip file to the remote server

Enter the following commands in your local machine download file location

$ scp -r 2.16.0.zip root@<your-domain-name/ip-address>:/var/www/html/mautic/mautic.zip

Note:- By any chance, you don’t have access to copy files to your server directory you can use FTP to upload the zip file, or you can use the git repo to clone it to your server directory, but you have to take some additional steps to get it up and running. Check this link for Mautic git repo.

Step 5: Unzip the file contents

    $ sudo unzip mautic.zip

If you don’t have unzip installed, you can install it by using

    $ sudo apt-get install unzip

Step 6: Delete the zip file

    $ sudo rm -rf mautic.zip

Step 7: Install php-fpm and dependencies

$ sudo apt install php libapache2-mod-php libapache2-mod-php php-common php-mbstring php-xmlrpc php-soap php-gd php-xml php-intl php-tidy php-mysql php-cli php-mcrypt php-ldap php-zip php-curl php-sqlite3 php-fpm

Step 8: Setting up MySQL

Install MySQL server

    $ sudo apt install mysql-server

Set MySQL root password

After the installation a temporary password will be generated in the mysqld.log file you can access this password by the following command $ sudo grep 'temporary password' /var/log/mysqld.log
Now you will get a message something like this [Note] A temporary password is generated for root@localhost: ,b*-rkuIR4Zas
Copy this password for the next step
Enter this command $ sudo mysql_secure_installation
This will prompt you to validate your password enter Y
After this, you will be prompted to set your password strength. Enter you choice between LOW, MEDIUM and STRONG.
Enter new password
You can say yes to all the other prompts that come after this
You will now be prompted with multiple questions on how to set up the MySQL installation. You can set Y to all the prompts
You will be able to login with the user root and a blank password Login to MySQL Create Mautic database and add User

mysql > create database mautic;
mysql > CREATE USER 'mauticuser'@'localhost' IDENTIFIED BY 'password';
mysql > GRANT ALL PRIVILEGES ON * . * TO 'mauticuser'@'localhost';
mysql > FLUSH PRIVILEGES;
mysql > exit;

Step 9: Setting up Http Server

(You can install Nginx or Apache server according to your needs)

Nginx: For installing Nginx you can follow these steps

$ sudo apt install nginx
$ sudo systemctl start nginx
$ sudo systemctl enable nginx

You need to make the following changes to nginx.conf file

$ vim /etc/nginx/nginx.conf

server {
       listen       80 default_server;
       listen       [::]:80 default_server;
       server_name  <Your domain name>;
       root         /var/www/html/mautic;
       location / {
               try_files $uri /index.php$is_args$args;
       }
       location ~ \.php$ {
       fastcgi_pass unix:/run/php/php7.2-fpm.sock;
       fastcgi_index index.php;
       fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
       include fastcgi_params;
       fastcgi_split_path_info ^(.+.php)(/.+)$;
       }
   }

Now depending upon your php-fpm setup you either need to add
fastcgi_pass 127.0.0.1:9000;
Or
fastcgi_pass unix:/var/run/php7.2-fpm.sock;
Note: If you are unclear on which value has to be set, you can check this in www.conf file.

    $ sudo vim /etc/php/7.2/fpm/pool.d/www.conf

Search for the listen parameter.

Apache: For installing Apache you can follow these steps

$ sudo apt install apache2
$ sudo systemctl start apache2
$ sudo systemctl enable apache2

You need to make the following changes to apache2.conf file

$ vim /etc/httpd/conf/httpd.conf

<VirtualHost *:80>
DocumentRoot /var/www/html/mautic
<Directory />
       Options FollowSymLinks
       AllowOverride All
   </Directory>
   <Directory /var/www/mautic>
       Options FollowSymLinks MultiViews
       AllowOverride All
       Order allow,deny
       Allow from All
   </Directory>
</VirtualHost>

After this you will be opening http://{your-domain-address} to open Mautic installation panel
There is more to this after the basic setup. But, since this tutorial is already too long here are some links to help you.
For more detailed setup on ubuntu 18.06 (Error resolutions | Setup | Setting up your first campaign) you can follow the original blog here — https://pepipost.com/tutorials/how-to-install-mautic-on-ubuntu-18-04/

Install Mailtrain on Ubuntu 18.04

Hiteshpandey — Tue, 24 Mar 2020 16:32:53 +0000

Mailtrain is a free open-source, self-hosted, newsletter application which is built on NodeJs and MySQL/MariaDB. Mailtrain allows us to send bulk emails by uploading e-mailing lists, with that it has email triggers, segmentation, email template generation from drag and drop to HTML editor. All you need is the SMTP credentials of your ESP.

In this tutorial, you will learn the steps required to successfully install and integrate Mailtrain Open Source Email Newsletter Application on a fresh Linux- Ubuntu 18.04 instance.

Please go through these prerequisites

A hosting server with a minimum of 1GB ram available for Mailtrain service. (To be at safer side, it is recommended to have slightly higher capacity)
Node.js (v7+)
MySQL (v5.5+ or MariaDB)
Redis (for session storage)
MySQL (v5.5+ or MariaDB) With these requirements fulfilled get-go through the installation steps

Installation

Step 1: Check Node version

$ sudo node -v

You can install Node.js using these commands (Skip this step, if you already have NodeJs installed)

$ sudo apt install build-essential
$ sudo apt-get install manpages-dev
$ sudo apt-get install nodejs

Step 2: Check MySQL version

$ sudo mysql -v

For the installation of MySQL server please refer to this article. (Skip, in case you have MySQL already installed):

Step 3: Clone Mailtrain git repository on your server directory

$ sudo git clone git://github.com/Mailtrain-org/mailtrain.git
$ cd mailtrain

Step 4: In this step you will create a new database and a new user, so log in to your MySQL instance and follow the given steps:

mysql> create database mailtrain;

Create a new user with its hostname and password

mysql> CREATE USER 'mailtrainuser'@'localhost' IDENTIFIED BY 'password';

Give user access and exit

mysql> GRANT ALL PRIVILEGES ON * . * TO 'mailtrainuser'@'localhost';

mysql> EXIT;

Step 5: Copy the file config/default.toml to config/production.toml

$ cp config/default.toml config/production.toml

Step 6: Edit config file

$ sudo vim config/production.toml

Step 7: Now you will make changes to the following sections in production.toml file:

Change the MySQL details based on the database you have created.

[mysql]
host="localhost" // your mysql host
user="mailtrainuser" // username
password="password" // mysql password
database="mailtrain" // database

Enable Redis if you have it installed.

[redis]
enabled=true
host="localhost"
port=6379
db=5

For installation of Redis follow the given set of commands

$ sudo apt-get install redis-server
$ sudo systemctl enable redis-server.service

Step 8: Run npm install

$ npm install --production

Step 9: For the final step, you will run the Mailtrain.

$ NODE_ENV=production npm start

You can run Mailtrain like this or you can create a Mailtrain service. To do that, you can now end the currently running instance by pressing [Ctrl + c] and follow the next steps.

Create and run Mailtrain service file

Step 1: Create a new user group forMailtrain

$ sudo adduser --system --group mailtrain

Step 2: Add user group in the production.toml file

$ sudo vim config/production.toml

Add these credentials

user="mailtrain"
group="mailtrain"

Step 3: Add permissions for our Mailtrain user to execute our directory

$ sudo chown mailtrain:mailtrain /var/www/html/mailtrain/ -R

Step 4: Copy our Mailtrain service file to our systemd system directory

$ sudo cp /var/www/html/mailtrain/setup/mailtrain.service /etc/systemd/system/

Step 5: Change the working directory in our mailtrain.service file

$ sudo vim /etc/systemd/system/mailtrain.service

Change "/opt/mailtrain" to whatever your Mailtrain folder path is for example "/var/www/html/mailtrain"

Step 6: Start the Mailtrain service

$ sudo service mailtrain start

And with this, you have the Mailtrain service up and running. You can check the status of the Mailtrain service by using this command

$ sudo service mailtrain status

With this done, you have successfully installed Mailtrain service on your Linux server.

The next step is to set up a reverse proxy.

Setup reverse proxy

Step 1: Edit production.toml file

$ sudo vim config/production.toml

Modify these lines

host="127.0.0.1" 
proxy=true

Step 2: Server config setup

For Apache2, use the commands mentioned below:

$ sudo apt install apache2
$ sudo systemctl start apache2
$ sudo systemctl enable apache2

You can find the Mailtrain server configuration setting for Apache in the following path.

$ vim /var/www/html/mailtrain/setup/mailtrain-apache.conf

Note:- You need to enable Proxy Mod on Apache2 (only if you haven't enabled it yet). This can be done by using the following commands:

$ sudo a2enmod proxy 
$ sudo a2enmod proxy_http

These are the settings you will be adding in your apache2.conf file:

$ vim /etc/apache2/apache2.conf

ProxyPreserveHost On
ProxyPass        "/" "http://127.0.0.1:3000/"
ProxyPassReverse "/" "http://127.0.0.1:3000/"
ServerName example.com
ServerAlias www.example.com

Restart the server

$ sudo service apache2 restart

For Nginx, use the commands mentioned below:

$ sudo apt install nginx
$ sudo systemctl start nginx
$ sudo systemctl enable nginx

You can find the Mailtrain server configuration setting for Nginx in the following path.

$ vim /var/www/html/mailtrain/setup/mailtrain-nginx.conf

These are the settings you will be adding in your nginx.conf file :

$ vim /etc/nginx/nginx.conf

    server {
    listen 80;
    listen [::]:80;

    server_name mailtrain.org www.mailtrain.org;
    access_log /var/log/nginx/mailtrain.log;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header HOST $http_host;
        proxy_set_header X-NginX-Proxy true;

        proxy_pass http://127.0.0.1:3000;
        proxy_redirect off;
    }
}

Restart the server:

$ sudo service nginx restart

Step 3: Restart Mailtrain service

$ sudo service mailtrain restart

With this, you will be able to access Mailtrain dashboard on your domain URL

http://{your-domain-address}
I hope with these simple steps you are now able to use the Mailtrain set up for your marketing campaigns. For setting up your SMTP credentials and other settings you can refer the following link which is the original post:

Mailtrain setup for Ubuntu 18.04 - https://pepipost.com/tutorials/how-to-install-mailtrain-on-ubuntu-18-04/

For installation on Centos 7 - https://pepipost.com/tutorials/how-to-install-mailtrain-on-centos-7/