How to build Serverless React On Lambda( – Part 1)?

How to solve the basic problem when trying to build serverless reactjs on Lambda?

The basic problem that we were trying to solve when building serverless react on lambda was that our website sends a lot of email and the way that our website works is. We have a very spiky load on our emails so the way. praise is a system that helps companies manage performance, reviews and typically.

We want to send out reminders for everyone in the company to say “Hey you’ve got you know 48 hours left to submit your review, hey you’ve got 24 hours left, you’ve got 4 hours left go to the website and actually do your review please”.

So what that means is every so often we go from 0 email sent to a couple hundred or thousand emails sent as quickly as possible. Because these are notifications and they are time sensitive. well we don’t actually do the email sending ourselves.

We do need to render the HTML that goes into each of these emails so that the people receiving the email sees their name and the information related to their review. And it got to the point that our back-end servers were getting bogged down by.

So much HTML and text that they needed to render for these emails. What was a good solution to having a spiky workload we decided to check out AWS lambda and see how we could harness the power of lambda to scale up and down very very seamlessly.

Benefits of serverless react on lambda project.

What do we actually run on lambda?

serverless reactjs on lambda

The next question was what do we actually run on lambda and the front end team at our company decided why don’t we check out react.js? why don’t we try running react on the server side in order to render the HTML for these emails?

So the nice thing about that was it’s a familiar technology, we’re already using it in praise it’s a familiar use case. Because basically rendering HTML is what front development frameworks are all about.

It’s already well tuned for this use case and of course because it’s JavaScript, we have access to the entire NPM ecosystem. And we could pull down lots of different tools that would help us out also as was mentioned earlier.

This is like the hips turist of hipster technologies, so we figured why not see just how far we can push the envelope. so we came up with this project that we’re calling react mail merge.

It is open-source you can go on github right now check out the project clone it play around with it and so on. Some people might be thinking, so what’s with the name well any of you who were around in the battle days before email got to be super popular.

There was a process in Microsoft Word called a mail merge, where you’d link up your address book with a form template in Microsoft Word that had forms for like a first name and address and so on.

And it linked these two together and create for you a couple hundred different copies of a letter that’s almost the same but has information from the address book for each person. So it’s sort of like what we’re trying to do.

Here this project is not actually delivering emails it’s just putting together the HTML to do so, plus it’s way retro and we’ve decided that everything old is apparently new again. Because tech keeps on reinventing the wheel over and over and over but that’s inside conversation anyway.

Problems of serverless react on lambda project

How does this project actually work?

So how does this project actually work? its first of all it’s more of a set of guidelines than a reusable framework, we don’t really have a project that you can plug your own code into. But the way that the code is we’ve written it so far works is we have one lambda function per email template.

Now this means that your email templates can be as flexible or as inflexible as you want them to be. For example we have an email template for inviting users to our platform, we have an email template for letting them know that they’ve joined the group and so on.

But we also have one email template for all the different reminders that we send whether it’s a four-hour reminder or a 24 hour or 48 hour or one week reminder or whatever. We all use the same template for that, so you can be as flexible as you want.

We have an API exposed so that you can invoke this temp with structured data mail-merge does data validation to make sure that the data that’s being passed is exactly what’s needed to render the template.

And you’re not missing anything important like oh the name of the person who were sending the email to, then it renders the email templates both HTML and text.

You can either pass it a single set of data for a single person or you can pass an array of data for every single user that needs to receive one of these emails. Then it takes the results of that rendering and passes it along to your mail delivery service.

We happen to use a company called postmark but you could customize this to use whatever mail delivery service you want and it gets any errors that might occur from the process of sending the emails from the mail delivery service and logs them and returns them to our back-end that’s calling mail merge as well.