Click for instructions
You can use Typescript in both your frontend React code (with react-scripts
v2.1+) and your serverless functions (with netlify-lambda
v1.1+). Follow these instructions:
yarn add -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript @types/aws-lambda
- convert
src/lambda/hello.js
tosrc/lambda/hello.ts
- use types in your event handler:
import { Handler, Context, Callback, APIGatewayEvent } from 'aws-lambda'
interface HelloResponse {
statusCode: number
body: string
}
const handler: Handler = (event: APIGatewayEvent, context: Context, callback: Callback) => {
const params = event.queryStringParameters
const response: HelloResponse = {
statusCode: 200,
body: JSON.stringify({
msg: `Hello world ${Math.floor(Math.random() * 10)}`,
params,
}),
}
callback(undefined, response)
}
export { handler }
rerun and see it work!
You are free to set up your tsconfig.json
and tslint
as you see fit.
If you want to try working in Typescript on the client and lambda side: There are a bunch of small setup details to get right. Check https://github.com/sw-yx/create-react-app-lambda-typescript for a working starter.
For a full demo of routing and authentication, check this branch: netlify/create-react-app-lambda#18 This example will not be maintained but may be helpful.
create-react-app
's default service worker (in src/index.js
) does not work with lambda functions out of the box. It prevents calling the function and returns the app itself instead (Read more). To solve this you have to eject and enhance the service worker configuration in the webpack config. Whitelist the path of your lambda function and you are good to go.