Send Emails with less coding using ReactJs + WSO2 MI
Hi Geeks, In this post im going to show you how to send a Email with less coding.
I will be using Reactjs to create Our UI and WSO2 MI an Open source software to implement our Email sending logic.
Only place will be coding when developing the React UI. For Email sending logic we will be doing Drag and Drop. ITS thats simple ;).
Before we get start we need to have below installed
Prerequisite :
- WSO2 MI
- WSO2 Integration Studio
- Reactjs
- Visual Studio code (or any preferred IDE)
1st Step : Lets Create Our React UI
You can create an React app using the below command
npx create-react-app mailappAfter that lets install the below react libraries
- axios : With help of axios we can call our WSO2 MI server
- react-bootstrap : To make the UI pretty
- react-notifications: Notification Component
Now lets create Form to fill senders email address,subject and the content. Below is my App.js file
As you can see below I have created 3 input filed (Sender’s email, subject and content) which will take user input.
When you press Send Mail button it will trigger the handleSubmit() method and will take the input filed values and create a JSON payload. After that it will send that payload to the WSO2 server using axios.
That’s it from the React side now lets create the email sending logic from the WSO2 MI server side.
2nd Step : Implementing Email Logic in WSO2 MI server (NO CODING :))
Lets open WSO2 Integration Studio and create a new Integration Project. You can follow this document if you do not know how to create a New Integration Project.
After creating the New Integration project, We need to add the Email connector to the workspace. In this example Ill be using the Email connector to send Emails.
You can add the Email connector by right click on the project >> New >> Other and search for Add connector to workspace. Click on that and search for Email. Install the Email connector to the workspace.
Now We have to implement the email logic. Lets first create an API.
Go to your project config directory and you expand the src > main >synapse-config > api [2].
Right click on the API folder and create an API. In this example i’ll be naming my API as EmailConnector.
Now lets Drag and drop the Send operation of the Email connector from the right side Palette tool as below.
Click on the Send operation and go to its properties tab. Create a connection from the properties window by clicking on the ‘+’ icon as shown below
In the pop up window, following parameters must be provided.
- Connection Name — Unique name to identify the connection by.
- Connection Type — Type of the connection which specifies the protocol to be used.
- Host — Host name of the mail server.
- Port — The port number of the mail server.
- Username — Username used to connect with the mail server.
- Password — Password to connect with the mail server.
Following values can be provided to connect to Gmail.
- Connection Name — smtpsconnection
- Connection Type — SMTP Secured Connection
- Host — smtp.gmail.com
- Port — 465
- Username — <your_email_address>
- Password — <your_email_password>
NOTE: If you have enabled 2-factor authentication, an app password should be obtained as instructed here.
Next, provide the expressions as below to the following properties in the properties window to obtain respective values from the JSON request payload that we are sending from our React App.
- to — json-eval($.to)
- from — FitMate
- subject — json-eval($.subject)
- content — json-eval($.content)
Now lets drag and drop a respond mediator after send operation in the flow.
I’ll be also adding two property mediators as below in the beginning of the API
<property name=”ContentType” scope=”axis2" type=”STRING” value=”application/json”/><property name=”messageType” scope=”axis2" type=”STRING” value=”application/json”/>
Im adding the above two is because the axios in React side is sending payload in different content-type. Since we need to read the payload using JSON expression in the MI server, im converting the payload using the above two properties.
Below is my full synapse config of the API
Now lets export the Car file to deploy it in the WSO2 MI server. Remember before exporting the Car file you also need to create a connector exporter project and include your email connector. You can refer this document [2]on how bundle your connector with Car file.
Export the Car file and place it in [MI_HOME]/repository/deployment/server/carbonapps directory.
Now go to [MI_HOME]/bin directory and run the below command to start the MI server
./micro-integrator.shNow lets go to your React App and lets give some input and see
As you can see when I press the Send email button the mail was sent to the recipient.
We can use WSO2 MI server for many use-case like this. There are lot connectors available for the MI server [3]. With out coding knowledge we can implement this kind of use-cases so quickly.
Also Check out WOS2 Choreo a Low code software development platform.
You can find the React Github Project from here and you can find the WSO2 Integration Project which we implement the email logic from this Github Repository.
[1].https://ei.docs.wso2.com/en/7.0.0/micro-integrator/develop/creating-artifacts/creating-an-api/
