Building a Serverless React App on Firebase Functions

View of the Bernese Alps from Schilthorn. © 2019 John Apostol

Next.js

Firebase Functions

From scratch

|-node_modules
|-.firebaserc
|-package-lock.json
`-package.json
|-node_modules
|-src
| `-app
| |-components
| | `-Nav.js
| |-pages
| | |-About.js
| | `-Index.js
| `-static
| `-placeholder.json
|-.firebaserc
|-package-lock.json
`-package.json

Create the serverless functions

|-node_modules
|-src
| |-app
| | |-components
| | | `-Nav.js
| | `-pages
| | |-About.js
| | `-Index.js
| `-functions
| `-index.js
|-.firebaserc
|-package-lock.json
`-package.json
Note: index.js is one large bundle. Don’t mistakenly believe that each export is its own bundle!

Compiling and deploying!

|-node_modules
|-src
| |-app
| | |-components
| | | `-Nav.js
| | `-pages
| | |-About.js
| | `-Index.js
| `-functions
| `-index.js
|-.firebaserc
|-firebase.json
|-package-lock.json
`-package.json

Thanks

Engineering Manager at The Zebra — johnapostol.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store