loading...
Cover image for Introducing: create-netlify-ts

Introducing: create-netlify-ts

atila profile image Atila Fassina ・2 min read

From my perspective, the JAMstack is specially appealing to developers with a frontend background. We can now deploy backend services without needing a deep understanding of server-side architecture, scalability, or even caching.

With that in mind, I have started a new project create-netlify-ts. My point with this project is leverage the self-documenting aspect of TypeScript to lower the barrier for Lambda-Functions even more.

How ❓

Well, by using the self-documenting aspect of TypeScript. On strongly typed code (and luckily with an IDE properly configured), your methods will whisper to you what they need.

But, adding TypeScript to a NodeJS adds a new layer of complexity. Node doesn't get types, so the simplicity of writin a .js file and pushing so it's ✨magically✨ live on Netlify goes away.

In comes netlify-lambda to add a build step to your Netlify Function. I wrote a small tutorial on getting this running.

But even if you know this setup inside-out and backwards, it is a bit annoying to make it every.single.time.

I know that feeling. So I made something.

Faster than instant noodles 🥡

With a simple command in your terminal:

# if you use Yarn
yarn create netlify-ts

# if you use NPM
npx create-netlify-ts

A new project is bootstrapped for you, ready to be deployed on Netlify Functions with another simple command.

gif of the terminal prompt with questions

The boilerplate is a bit more than the minimum requirements for a working Netlify Function. It can give you some opinionated coding style (very little), and also brings the request and response types, so you can easily write the logic of your service without ever alt-tabbing away from the IDE.

GitHub logo atilafassina / create-netlify-ts

👟 Building Netlify Functions with TypeScript has never been this easy

create-netlify-ts

👟 Building Netlify Functions with TypeScript easily

📦 Package Manager agnostic

🐾 No production footprint

🚀 Ready to deploy

❯_

npm

npx create-netlify-ts

yarn

yarn create netlify-ts

Answer the questions and start coding!

Terminal showing create-netlify-ts working

🌲 File tree

 {{ package-name }}
  ├── src
  │   └── {{ your-function-name }}.ts
  ├── package.json
  ├── .babelrc
  ├── .gitignore
  └── netlify.toml

🧳 Installed dependencies

All depdendencies are installed as devDependencies, create-netlify-ts has no footprint on your production code.

Required dependencies

Package Name Why
netlify-lambda Adds build-step to Netlify Functions
typescript The compiler for TypeScript (tsc)
@babel/preset-env Tells Babel which JavaScript syntax to output
@babel/preset-typescript Teach Babel to use TypeScript compiler
@types/aws-lambda Request/Response types for AWS Lambdas†

†: Netlify Functions runs on top of AWS-Lambdas

Optional dependencies

🛫 Flying solo

It‘s a dangerous road out there. Take these:

📹 Write

Features ✨

  • Server Rewrite to the root of your domain
  • Deploy setup
  • Optional dependencies to streamline your workflow

Requirements ❗️

There are 2 things which I have not been able to workaround if it is the first time deploying to Netlify for you.

You need to:

  1. Manually create your Netlify account beforehand
  2. If using Netlify CLI you need to link your account with the CLI manually as well

Help wanted 🏆

Create-Netlify-TS is on a very early stage, and I welcome any kind of contribution. For example, you can:

  • offer feedback on your usage
  • suggest improvements on existing features and configuration
  • add more testing coverage
  • automate some needed tasks (package publishing for example)
  • anything else you can think of, pop an issue and let's talk!

💌

If you found this project useful, please consider sharing it with your network, that would help me a lot to continue and make improvements. 😁

Posted on by:

atila profile

Atila Fassina

@atila

💚 JAMstack, Design Systems, and tooling

Discussion

markdown guide