Fullstack Serverless App Template (React + Apollo + GraphQL + TypeScript + Netlify)
Tags: gftwhackathon, netlify, fullstack, serverless
Published: 2020-05-09 17:19:56

---
title: Fullstack Serverless App Template (React + Apollo + GraphQL + TypeScript + Netlify)
published: true
canonical_url: https://abstracted.in/fullstack-serverless-template/
description: I created a template that will enable developers to quickly bootstrap an Apollo GraphQL + TypeScript project, which can be deployed in a serverless fashion on Netlify. Also, with the FaunaDB addon, it will enable developers to have a stateful app. Thus, developers can concentrate on core application logic and scale the application as their app grows at the same time they don't have to sacrifice on security.
tags: gftwhackathon, netlify, fullstack, serverless
---

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built

I created a template that will enable developers to quickly bootstrap an Apollo GraphQL + TypeScript project, which can be deployed in a serverless fashion on Netlify. Also, with the FaunaDB addon, it will enable developers to have a stateful app. Thus, developers can concentrate on core application logic and scale the application as their app grows at the same time they don't have to sacrifice on security.

Netlify functions enable developers to deploy lambda functions. They have a template for Apollo GraphQL as well. However, this template doesn't support TypeScript. Limiting the advantages of GraphQL to just querying and mutating data. Having TypeScript helps developers to change code with reliability. This also enhances overall experience with GraphQL as schema defined in GraphQL can be directly exported to TypeScript types.

For such cases, Netlify recommends using legacy command `netlify-lambda` command. But people ran into other issues using it.

### Submission Category: Foundational Technology

[Note]: # (Foundational Technology, Creative Catalyst, or Exciting Experiments)


## Demo 
Application: https://apollo-graphql-typescript.netlify.app/
GraphQL PlayGround: https://apollo-graphql-typescript.netlify.app/.netlify/functions/graphql
 

## Link to Code

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)
{% github https://github.com/pushkar8723/apollo-graphql-typescript %}

## How I built it 

[Note]: # (For example, what's the stack? did you run into issues or discover something new along the way? etc!)
I integrated TypeScript at the build time itself. Thus there is no need to use the legacy command.

## Additional Resources/Info 
https://community.netlify.com/t/getting-typescript-to-work-with-netlify-functions/6198
https://community.netlify.com/t/does-netlify-dev-support-typescript/3842


[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)

**UPDATE:**

I further integrated `graphql-codegen` to automatically generate TypeScript types for GraphQL schema. And also integrated `eslint` and `husky` to introduce lint checks and validate them before each commit.


**UPDATE 2:**

I created a demo project using this template and also integrated FaunaDB addon on [GitHub](https://github.com/pushkar8723/social-board).