Rendering and serving a Create-React-App from an Express server running within a Lambda function

Yatin badal
Apr 25, 2018 · 6 min read

Serverless architecture has emerged as one of the hottest solutions in recent times. Its ease-of-use, speed and simplicity make it a clear winner when it comes to rapid application development. The Serverless Framework extends on these core values and provides a solid ecosystem for developing Serverless applications with fantastic support and tooling. With a few lines of YAML markup and Javascript, you’re able to interactively deploy infinitely scalable*, publicly available APIs or services atop AWS’s Lambda Functions.

As a fun, little, proof-of-concept, I thought it would be interesting to see if I could get a Lambda function running an Express.js server to render and serve (Server-Side Render) a non-ejected Create-React-App (CRA) build.

Right, let’s get into it, we need to:

  1. Bootstrap a Serverless application
  2. Setup Express.js
  3. Render and serve a CRA

Prerequisites

  • Serverless framework — you can find installation instructions here. Be sure to also configure your AWS credentials.
  • Node 8.10

Bootstrap

Let’s start by creating a new project directory and initializing it with NPM

Create a serverless.yml and index.js file

Next, let’s pull in Express.js and serverless-http

We also want to install the serverless-webpack plugin which will help use all the shiny new JS. The serverless-offline plugin will allow us to deploy our Serverless stack locally. We will use webpack-node-externals to exclude node_modules from our build.

Configure Serverless

Within serverless.yml, place the following YAML:

Integrate Express

Inside index.js place the following:

Configure Webpack

Create a webpack.config.js file

We will be using babel to transpile our code, so we will need a pull in the necessary loaders and packages

Add the following webpack config

Right, let’s give this a test and say hello to all the world

You should see the following output

Visit http://localhost:3000 in your browser and you should see Hello World!

Create React App

Next, let’s create our client — a create react app (CRA) in my-project root, use the create react app cli

This should create a client directory containing a react application.

Express Middleware

We will use an Express middleware to do all the heavy lifting and render our react app.

Create a directory called middleware

Inside middleware, create a renderer.js file

Add the following code

Make sure you also install all the react dependecies

Great, now that we’ve created our renderer middleware, let’s update index.js and use our renderer

We’re almost at the finish line. Let’s make a few changes to our webpack config first. Install the following loaders and plugins

Update webpack.config.js to the following config

We employ the copy-webpack-plugin in order to copy our client build to the bundle we plan to deploy to AWS.

Test Locally

To deploy our serverless application locally, run

Visit http://localhost:3000 in your browser and you should see the default create react app :D.

Deploy

In order to deploy our amazing new serverless application to AWS, we first need to update the client package.json . Add the homepage property with the value “/dev”. This is so that our react app is aware of the base path enforced by API Gateways stages.

Finally, let’s build and deploy

If everything goes according to plan, our create react app will build, webpack will bundle everything together and Serverless will orchestrate our serverless architecture as well as upload our bundle to a Lambda.

If Serverless successfully deploys your application, you should see your newly created Lambda function as well as API Gateway endpoint in the output.

Navigate to your newly created endpoint and you should see your react app, which has been rendered and served from an Express app running inside a Lambda function.

Closing

We have successfully leveraged AWS Lambda in order to render and serve a create react app. This, obviously, might not be the best solution, but it definitely is an interesting one. Serverless architecture is an amazing technology and has great potential. So go forth and do more interesting things with serverless, today!


Yatin badal

Written by

Fullstack Meme Consumer. https://yatin.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade