How to Set Up Your Own Prerender Environment With AWS EC2

When developing a Single Page App (SPA), server-side rendering is your best friend to deal with Search Engine Optimization (SEO). Sometimes, you cannot alter the backend, or you don’t even have one to serve your client-side files. In this case, we have REST APIs or serverless applications with the SPA files hosted in a storage service with CDNs to improve performance. In this scenario, your new best friend becomes prerender.io.

The catch? Prerender works as a middleware between the server and the client. The frontend architecture mentioned before will not allow you to set it up. (Note: most storage services like S3 currently do not allow middlewares). That’s why we decided to move from the storage service to a dedicated server to serve these files and perform the prerender when needed.

For those who are reading this post, it is important to know the problem with SPAs and SEO, and how prerender works. This blog post is the next step: help you set up your own prerender environment from the very beginning, using AWS EC2.

We identified 6 steps to follow using: Nginx, node, forever and of course, prerender.

1. Creating the EC2 instance

As mentioned before, we will use AWS EC2 as our dedicated server. This guide was written using an instance with the Ubuntu image, but with a few little adjustments, it should also work for the Amazon Linux image.

Regarding the instance type, I suggest starting with something small, get some metrics and then scale if needed, t2.micro should be okay to start off with. Finally, configure the security group to allow SSH connections and custom TCP inbounds on port 3000 as that is where your prerender service will work (you can choose your own port here).

2. Setting up the environment

Connect to the instance and install the needed tools. To get node, I recommend using nvm and choosing the latest LTS version. After nvm and node, we need to get forever, that will allow us to run the prerender server continuously in the background. Next, we need to fetch the prerender source. To do this, clone the GitHub repo and run an npm install to get its dependencies.

3. Nginx

To quickly take you through the setup follow this guide. Then test the Nginx out by accessing the EC2 IP with the browser.

4. Prerender

Almost ready now! Upload your source files to /home/yourusername/www/mysite (feel free to change the nginx configuration to use a different folder). Next, start the prerender server using forever: forever start /path/to/prerender/server.js. Lastly, we need to update our nginx configuration following prerender’s advice, but with some different settings:

The differences:

• error_page: Consider this example-

Suppose we do not have that config yet, and one of the URLs of our SPA is /users/3/profile and a user enters that URL. Nginx will look for the file named profile inside the 3 folders inside the users folder. If the file is not there, this will throw a 404 error. However, what we usually want here is to let our SPA handle the URL to properly render our site, so we handle the 404 errors by rendering the index.html. If the SPA recognizes the URL, it will continue to render it, if it doesn’t, it should redirect the user to the default view.

Because this is definitely not the most enjoyable way to handle SPA URLs, take a minute to consider if this is needed in your app and if it isn’t, remove it. (If you have a cleaner solution, send them my way!)

• proxy_pass: We have our own service running on port 3000 with prerender. Instead of handling the user request to an external prerender service, we handle the request to localhost:3000.

5. Polishing the environment

At this point, you should have your app with enabled prerender up and running. You can quickly test that out using curl: curl -A “twitterbot” <ec2 ip>/<spa url>

Deploying to ec2 can be bothersome since you need to manually upload your files each time and make sure they are placed in the correct folder. A great improvement to this pipeline is handling deploys using git or Capistrano. This guide explains a simple approach to deploying your app using git bare repositories.

Lastly, we need to make sure that everything keeps working fine after a reboot. You can use the file /etc/rc.local file to start to prerender on startup. Create a filed named prerender_startup.sh in the root directory to start to prerender:

Then, in rc.local:

Make sure /etc/rc.local is executable and that the script it calls is also executable.

6. Considerations when using a CDN

Here’s a quick tip if you are setting up a CDN to improve performance. Configure the CDN to forward the User-Agent header (some CDN services do not forward some headers by default) and configure your CDN to forward query strings if the render of your SPA depends on them.

That is it! Go ahead and test your environment with the google search console. Submit a sitemap if you have one, and keep an eye on nginx logs to make sure everything works fine.

Do you have suggestions or further questions? Connect with me on Twitter @sebbal9 or send me an email to sebastian.balay@wolox.com.ar, I would love to hear your feedback and help you with any doubt.