Zeet Zeet is sponsoring this blogpost for the next month. I tried it out the other day. It's like serverless but for running entire back ends. You can host and scale apps automagically. Pretty neat. Not so long ago I started exploring server-side rendered single-page applications. Yeah, try saying that three times fast. Building products for startups has taught me SEO is a must if you want an online presence. But, you also want the performance SPAs can provide. We want the best of both worlds. The SEO boost server-side rendering provides, and the speed of a Single Page Application. Today I’ll show you all this while hosting it basically for free in a serverless environment on AWS Lambda. TL;DR Let’s run through what this tutorial will cover. You can skim through and jump to the section that interest you. Or, be a nerd and keep reading. * whisper * Please be a nerd. What’re we building? Configure and install dependencies Build the app with the and Serverless Framework Next.js Deploy the app to AWS Lambda Note : The code we will write is already on GitHub if you need further reference or miss any steps, feel free to check it out. The guys over at Cube.js gave me a quick rundown of React before I started writing this tutorial. They have a serverless analytics framework that plugs nicely into React. Feel free to give it a try. What’re we building? Well, a blazing-fast React application of course! The cost of every SPA is lousy SEO capabilities though. So we need to build the app in a way to incorporate server-side rendering. Sounds simple enough. We can use , a lightweight framework for static and server-rendered applications. Next.js React.js To accomplish this we need to spin up a simple Express server and configure the Next app to serve files through Express. It is way simpler than it sounds. However, from the title, you can assume we don’t like the word in my neighborhood. The solution is to deploy this whole application to ! It is a tiny Node.js instance after all. server AWS Lambda Ready? Let’s get crackin’! Configure and install dependencies As always, we’re starting with the boring part, setting up the project and installing dependencies. 1. Install the Serverless Framework In order for serverless development to be absolute torture, go ahead and install the . not Serverless framework $ npm i -g serverless Note: If you’re using Linux or Mac, you may need to run the command as sudo. Once installed globally on your machine, the commands will be available to you from wherever in the terminal. But for it to communicate with your AWS account you need to configure an IAM User. Jump over , then come back and run the command below, with the provided keys. here for the explanation $ serverless config credentials \  
    --provider aws \  
    --key xxxxxxxxxxxxxx \  
    --secret xxxxxxxxxxxxxx Now your Serverless installation knows what account to connect to when you run any terminal command. Let’s jump in and see it in action. 2. Create a service Create a new directory to house your Serverless application services. Fire up a terminal in there. Now you’re ready to create a new service. What’s a service you ask? View it as a project. But not really. It’s where you define AWS Lambda functions, the events that trigger them and any AWS infrastructure resources they require, all in a file called . serverless.yml Back in your terminal type: $ serverless create --template aws-nodejs --path ssr-react-next The create command will create a new . Shocker! But here’s the fun part. We need to pick a runtime for the function. This is called the . Passing in will set the runtime to Node.js. Just what we want. The will create a folder for the service. service template aws-nodejs path 3. Install npm modules Change into the folder in your terminal. There should be three files in there, but for now, let’s first initialize npm. ssr-react-next $ npm init -y After the package.json file is created, you can install a few dependencies. $ npm i \
    axios \
    express \
    serverless-http \
    serverless-apigw-binary \
    next \
    react \
    react-dom \
    path-match \
    url \
    serverless-domain-manager These are our production dependencies, and I’ll go into more detail explaining what they do a bit further down. The last one, called serverless-domain-manager will let us tie a domain to our endpoints. Sweet! Now, your should look something like this. package.json { : , : , : , : , : { : , : }, : [], : , : , : { : , : , : , : , : , : , : , : , : , : }
} // package.json "name" "serverless-side-rendering-react-next" "version" "1.0.0" "description" "" "main" "index.js" "scripts" // ADD THESE SCRIPTS "build" "next build" "deploy" "next build && sls deploy" "keywords" "author" "" "license" "ISC" "dependencies" "axios" "^0.18.0" "express" "^4.16.4" "next" "^7.0.2" "path-match" "^1.2.4" "react" "^16.6.3" "react-dom" "^16.6.3" "serverless-apigw-binary" "^0.4.4" "serverless-http" "^1.6.0" "url" "^0.11.0" "serverless-domain-manager" "^2.6.0" We also need to add two scripts, one for building and one for deploying the app. You can see them in the section of the . scripts package.json 4. Configure the serverless.yml file Moving on, let’s finally open up the project in a code editor. Check out the file, it contains all the configuration settings for this service. Here you specify both general configuration settings and per function settings. Your will be full of boilerplate code and comments. Feel free to delete it all and paste this in. serverless.yml serverless.yml service: ssr-react-next

provider:
  name: aws
  runtime: nodejs8 stage: ${ :custom.secrets.NODE_ENV}
  region: us-east environment: 
    NODE_ENV: ${ :custom.secrets.NODE_ENV}

functions:
  server:
    handler: index.server
    events:
      - http: ANY /
      - http: ANY /{proxy+}

plugins:
  - serverless-apigw-binary
  - serverless-domain-manager

custom:
  secrets: ${file(secrets.json)}
  apigwBinary:
    types:
      - customDomain:
    domainName: ${ :custom.secrets.DOMAIN}
    basePath: stage: ${ :custom.secrets.NODE_ENV}
    createRoute53Record: # endpointType: # the ACM certificate is created a region except you need .10 self -1 self '*/*' self '' self true 'regional' if in for `'us-east-1'` `endpointType: 'regional'` The property lists all the functions in the service. We will only need one function because it will run the Next app and render the React pages. It works by spinning up a tiny Express server, running the Next renderer alongside the Express router and passing the server to the module. functions serverless-http In turn, this will bundle the whole Express app into a single lambda function and tie it to an API Gateway endpoint. Under the functions property, you can see a function that will have a handler named in the file. API Gateway will proxy any and every request to the internal Express router which will then tell Next to render our React.js pages. Woah, that sounds complicated! But it's really not. Once we start writing the code you'll see how simple it really is. server server index.js We’ve also added two plugins, the for letting more mime types pass through API Gateway and the which lets us hook up domain names to our endpoints effortlessly. serverless-apigw-binary serverless-domain-manager We also have a section at the bottom. The property acts as a way to safely load environment variables into our service. They're later referenced by using where the actual values are kept in a simple file called . custom secrets ${self:custom.secrets.<environment_var>} secrets.json Apart from that, we’re also letting the API Gateway binary plugin know we want to let all types through, and setting a custom domain for our endpoint. That’s it for the configuration, let’s add the file. secrets.json 5. Add the secrets file Add a file and paste this in. This will keep us from pushing secret keys to GitHub. secrets.json { : , : } "NODE_ENV" "production" "DOMAIN" "react-ssr.your-domain.com" Now, only by changing these values you can deploy different environments to different stages and domains. Pretty cool. Build the app with the Serverless Framework and Next.js To build a server-side rendered React.js app we’ll use the Next.js framework. It lets you focus on writing the app instead of worrying about SEO. It works by rendering the JavaScript before sending it to the client. Once it’s loaded on the client side, it’ll cache it and serve it from there instead. You have to love the speed of it! Let’s start by writing the Next.js setup on the server. 1. Setting up the Next.js server(less)-side rendering Create a file named . Really intuitive, I know. server.js express = ( ) path = ( ) dev = process.env.NODE_ENV !== next = ( ) pathMatch = ( ) app = next({ dev }) handle = app.getRequestHandler() { parse } = ( ) server = express() route = pathMatch()
server.use( , express.static(path.join(__dirname, )))
server.get( , (req, res) => app.render(req, res, ))
server.get( , (req, res) => app.render(req, res, ))
server.get( , (req, res) => { params = route( )(parse(req.url).pathname) app.render(req, res, , params)
})
server.get( , (req, res) => handle(req, res)) .exports = server // server.js const require 'express' const require 'path' const 'production' const require 'next' const require 'path-match' const const const require 'url' const const '/_next' '.next' '/' '/' '/dogs' '/dogs' '/dogs/:breed' const '/dogs/:breed' return '/dogs/_breed' '*' module It’s pretty simple. We’re grabbing Express and Next, creating a static route with and passing it the directory of the bundled JavaScript that Next will create. The path is , and it points to the folder. express.static /_next .next We’ll also set up the server-side routes and add a route for the client-side renderer. catch-all Now, the app needs to be hooked up to and exported as a lambda function. Create an file and paste this in. serverless-http index.js sls = ( ) binaryMimeTypes = ( ) server = ( ) .exports.server = sls(server, { : binaryMimeTypes
} // index.js const require 'serverless-http' const require './binaryMimeTypes' const require './server' module binary As you can see we also need to create file to hold all the mime types we want to enable. It'll just a simple array which we pass into the module. binaryMimeTypes.js serverless-http .exports = [ , , , , , , , , , , , , , , , , ] // binaryMimeTypes.js module 'application/javascript' 'application/json' 'application/octet-stream' 'application/xml' 'font/eot' 'font/opentype' 'font/otf' 'image/jpeg' 'image/png' 'image/svg+xml' 'text/comma-separated-values' 'text/css' 'text/html' 'text/javascript' 'text/plain' 'text/text' 'text/xml' Sweet, that’s it regarding the Next.js setup. Let’s jump into the client-side code! 2. Writing client-side React.js In the root of your project create three folders named, , , . Once inside the layouts folder, create a new file with the name , and paste this in. components layouts pages default.js React Meta Navbar ({ children, meta }) => ( <Meta props={meta} />
    <Navbar />
    { children }
  </div> // layouts/default.js import from 'react' import from '../components/meta' import from '../components/navbar' export default < > div ) The default view will have a component for setting the metatags dynamically and a component. The will be rendered from the component that uses this layout. <Meta /> <Navbar /> { children } Now add two more files. A and a file in the folder. navbar.js meta.js components React Link () => ( <ul>
      <li>
        <Link href='/'>Home</Link>
      </li>
      <li>
        <Link href='/dogs'>Dogs</Link>
      </li>
      <li>
        <Link href='/dogs/shepherd'>Only Shepherds</Link>
      </li>
    </ul> ) // components/navbar.js import from 'react' import from 'next/link' export default < = > nav className 'nav' </ > nav This is an incredibly simple navigation that’ll be used to navigate between some cute dogs. It’ll make sense once we add something to the folder. pages Head ({ props = { title, description } }) => ( <Head>
      <title>{ props.title || 'Next.js Test Title' }</title>
      <meta name='description' content={props.description || 'Next.js Test Description'} />
      <meta name='viewport' content='width=device-width, initial-scale=1' />
      <meta charSet='utf-8' />
    </Head>
  </div>
) // components/meta.js import from 'next/head' export default < > div The will make it easier for us to inject values into our meta tags. Now you can go ahead and create an file in the folder. Paste in the code below. meta.js index.js pages React Default axios meta = { : , : } { (props) { (props) .state = { : , : {}
    } .fetchData = .fetchData.bind( )
  } componentDidMount () { .fetchData()
  } fetchData () { .setState({ : }) { data } = axios.get( ) .setState({ : data[ ], : })
  }
  render () { ( <div>
          <h1>This is the Front Page.</h1>
          <h3>Random dog of the day:</h3>
          <img src={this.state.dog.url} alt='' />
        </div>
      </Default> // pages/index.js import from 'react' import from '../layouts/default' import from 'axios' const title 'Index title' description 'Index description' . class IndexPage extends React Component constructor super this loading true dog this this this async await this async this loading true const await 'https://api.thedogapi.com/v1/images/search?limit=1' this dog 0 loading false return < = > Default meta {meta} )
  }
}

export default IndexPage The file will be rendered on the root path of our app. It calls a dog API and will show a picture of a cute dog. index.js Let’s create more routes. Create a sub-folder called and create an file and a file in there. The will be rendered at the route while the will be rendered at where the represents a route parameter. dogs index.js _breed.js index.js /dogs _breed.js /dogs/:breed :breed Add this to the in the dogs directory. index.js React axios Default meta = { : , : } { (props) { (props) .state = { : , : []
    } .fetchData = .fetchData.bind( )
  } componentDidMount () { .fetchData()
  } fetchData () { .setState({ : }) { data } = axios.get( ) .setState({ : data, : })
  }
  renderDogList () { ( <li key={key}>
            <img src={dog.url} alt='' />
          </li>
        )}
      </ul> <Default meta={meta}>
        <div>
          <h1>Here you have all dogs.</h1>
          {this.renderDogList()}
        </div>
      </Default> // pages/dogs/index.js import from 'react' import from 'axios' import from '../../layouts/default' const title 'Dogs title' description 'Dogs description' . class DogsPage extends React Component constructor super this loading true dogs this this this async await this async this loading true const await 'https://api.thedogapi.com/v1/images/search?size=thumb&limit=10' this dogs loading false return {this.state.dogs.map((dog, key) => < > ul )
  }
  render () {
    return ( )
  }
}

export default DogsPage And, another snippet in the file in the dogs folder. _breed.js React axios Default { getInitialProps ({ : { breed } }) { { breed }
  } (props) { (props) .state = { : , : {}, : []
    } .fetchData = .fetchData.bind( )
  } componentDidMount () { .fetchData()
  } fetchData () { .setState({ : }) reg = ( .props.breed, ) { data } = axios.get( ) filteredDogs = data.filter( dog.breeds[ ]
        .name
        .toLowerCase()
        .match(reg)
    ) .setState({ : filteredDogs, : .props.breed, : { : , : }, : })
  }
  renderDogList () { ( <li key={key}>
            <img src={dog.url} alt='' />
          </li>
        )}
      </ul> <Default meta={this.state.meta}>
        <div>
          <h1>Dog breed: {this.props.breed}</h1>
          {this.renderDogList()}
        </div>
      </Default> // pages/dogs/_breed.js import from 'react' import from 'axios' import from '../../layouts/default' . class DogBreedPage extends React Component static query return constructor super this loading true meta dogs this this this async await this async this loading true const new RegExp this 'g' const await 'https://api.thedogapi.com/v1/images/search?size=thumb&has_breeds=true&limit=50' const => dog 0 this dogs breed this meta title `Only here!` ${ .props.breed} this description 'Cute doggies. :D' loading false return {this.state.dogs.map((dog, key) => < > ul )
  }
  render () {
    return ( )
  }
}

export default DogBreedPage As you can see in the component we're injecting custom meta tags. It will add custom fields in the of your page, giving it proper SEO support! Default <head> Note : If you’re stuck, here’s what the code looks like in the repo . Let’s deploy it and see if it works. Deploy the app to AWS Lambda At the very beginning, we added a script to our package.json called deploy. It'll build the Next app and deploy the serverless service as we specified in the serverless.yml. All you need to do is run: $ npm run deploy The terminal will return output with the endpoint for your app. We also need to add the domain for it to work properly. We’ve already added the configuration in the but there's one more command we need to run. serverless.yml $ sls create_domain This will create a CloudFront distribution and hook it up to your domain. Make sure that you’ve added the certificates to your AWS account. It usually takes around 20 minutes for AWS to provision a new distribution. Rest your eyes for a moment. Once you’re back, go ahead and deploy it all again. $ npm run deploy It should now be tied up to your domain. Here’s what it should look like. Nice! The app is up-and-running. Go ahead and try it out. Wrapping up This walkthrough was a rollercoaster of emotions! It gives you a new perspective into creating fast and performant single-page apps while at the same time keeping the SEO capabilities of server-rendered apps. However, with a catch. There are no servers you need to worry about. It’s all running in a serverless environment on AWS Lambda. It’s easy to deploy and scales automatically. Doesn’t get any better. If you got stuck anywhere take a look at the for further reference, and feel free to give it a star if you want more people to see it on GitHub. GitHub repo If you want to read some of my previous serverless musings head over to or my profile join my newsletter! Or, take a look at a few of my articles right away: A crash course on Serverless with AWS — Building APIs with Lambda and Aurora Serverless A crash course on Serverless with AWS — Image resize on-the-fly with Lambda and S3 A crash course on Serverless with AWS — Triggering Lambda with SNS Messaging A crash course on serverless-side rendering with Vue.js, Nuxt.js and AWS Lambda Building a serverless contact form with AWS Lambda and AWS SES A crash course on Serverless APIs with Express and MongoDB Solving invisible scaling issues with Serverless and MongoDB How to deploy a Node.js application to AWS Lambda using Serverless Getting started with AWS Lambda and Node.js A crash course on securing Serverless APIs with JSON web tokens Migrating your Node.js REST API to Serverless Building a Serverless REST API with Node.js and MongoDB A crash course on Serverless with Node.js I also highly recommend checking out about Next.js, and about the serverless domain manager. this article this tutorial Hope you guys and girls enjoyed reading this as much as I enjoyed writing it. If you liked it, slap that tiny clap so more people here on HackerNoon will see this tutorial. Until next time, be curious and have fun. Originally published at dev.to .

Alongside

Amazon

A crash course on Serverless with AWS — Running Node.js 11 on Lambda

A crash course on serverless-side rendering with React.js, Next.js and AWS Lambda

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A crash course on Serverless APIs with Express and MongoDB

101 Stories To Learn About Cloud Infrastructure

10 Things in Engineering We Don't Spend Enough Time On

10 Things I Did To Increase CloudTrail Logs Security

10 reasons to give cloud computing a go

10 Lessons from 10 Years of AWS (part 1)

A crash course on Serverless APIs with Express and MongoDB

101 Stories To Learn About Cloud Infrastructure

10 Things in Engineering We Don't Spend Enough Time On

10 Things I Did To Increase CloudTrail Logs Security

10 reasons to give cloud computing a go

10 Lessons from 10 Years of AWS (part 1)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps