TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

A serverless function is something that is going to allow us to do server-like things without having to manage servers, but an important distinction here is that serverless does not mean that there are no servers.

The environment is actually running on top of an operating system and uses physical servers, but the responsibility for provisioning and managing the infrastructure belongs entirely to the service provider.

Some of the benefits of using serverless functions:

Enhanced scalability. No need for developers to implement code to scale. It scales automatically.
Reduced time to market. Serverless is an optimized set of tools for building quickly.
No boiler code. A serverless function is just a tiny piece of logic. Reducing the complexity of software.
More time for user experience. Serverless functions allow teams to focus resources on the user experience and not on managing servers.
Security. We can call third-party APIs securely without exposing important data on the client-side.

serverless

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Shakuro Graphics

In this lesson, you'll learn how to set up a new Vite project and configure it to use React with TypeScript.

Set up a Vite project with React and TypeScript

In this lesson, you'll globally install the Netlify CLI and use its dev command to run your site locally. Netlify automatically detects if it's a Vite project!

Set up Vite local dev with the Netlify CLI

Netlify has the power to automatically detect serverless functions in your project and run a functions server with hot reloading for you. 

In this lesson, you'll learn how to create serverless functions in your Netlify app using TypeScript

react

Add TypeScript powered serverless functions to a Netlify project

Learn how to create a form with controlled inputs using React hooks.

If you'd like to learn more about CSS Modules [check out the docs on Github](https://github.com/css-modules/css-modules)

Create a form with React hooks

In this lesson, you will learn how to create a Netlify serverless function, powered by TypeScript, to handle form submissions.

Create a serverless form submission handler with TypeScript

In this lesson, you'll learn how to set up a submit handler that posts your form data to a serverless function.

Submit form data to a Netlify serverless function

After all your hard work, it's time to deploy your app! 

In this lesson, you will learn how to get your project onto GitHub and deploy it using Netlify

Deploy a Vite project with the Netlify CLI

Deploy a Serverless API React Application with TypeScript

[Ampt](https://getampt.com/) lets developers rapidly build, deploy, and scale JavaScript/TypeScript apps in the cloud without complicated configs or managing infrastructure.

In this quick lesson we're going to learn:
- What is [Ampt](https://getampt.com/)
- How does it simplify our development workflow by configuring and provisioning infrastructure for us
- How to install @ampt/cli
- How to create a new Ampt project by choosing a TypeScript express API template
- How to iterate on a newly created API by taking advantage of Ampt's fast feedback loop.


https://app.egghead.io/api/v1/lessons/netlify-set-up-a-vite-project-with-react-and-typescript/subtitles

Create a serverless API with Ampt and TypeScript

[00:00] According to AMPed landing page, it is the fastest way to get things done in the cloud. The whole idea is that AMPed lets developers rapidly build, deploy, and scale JavaScript applications in the cloud

[00:14] without messing with complicated configs, managing infrastructure, logging into AWS console, and so on. So the whole promise is that we are going to get all the power of the cloud with none of the complexity. And this small example shows AMPed developer experience.

[00:31] So we can see that we can import many modules from AMPed SDK, including HTTP. We can use well-known frameworks and libraries, such as Express.

[00:42] And with a single line, AMPed is going to figure out what kind of infrastructure does it need to provision in the cloud for us to get the server up and running. So again, we don't have to think about the cloud. The only thing that we need to think about is what kind of behavior we want to implement. Here's another example.

[01:01] Suppose that we have some kind of business logic that we would like to execute every hour. So we can import tasks from AMPed SDK. And if I scroll down a little bit, we can see that we can create an instance of a task and have it execute every hour.

[01:15] And again, AMPed is going to provision, configure, and figure out how exactly do we run a task every hour using AWS. The only part that we are actually responsible for is our custom business logic. With all of that, let's get started.

[01:32] First of all, we need to go ahead and install the AMPed command line interface. Once this is done, I'm going to go ahead and run AMPed. And this is going to open a new browser tab, which we can see over here. So I'm going to go ahead and click on Confirm. And now we need to sign in. So I'm going to sign in with Google.

[01:49] And my device is now connected to AMPed. So I'm going to create a new directory for my project, which I'm going to call my Egghead AMPed API. I'm going to cd into it and run the AMPed command again. Do you want to create a new app? Yes, I do. And we have a number of templates to choose from. So there are templates for JavaScript.

[02:08] There are templates for TypeScript, Fastify, Koa, Hono, many frameworks like Astro, Next.js, Remix, Angular, so many to choose from. I'm going to go ahead and choose the TypeScript API Express and hit Enter. Next, enter a name for your app. I'm going to go ahead with my Egghead AMPed API.

[02:27] After a while, we can see that AMPed has generated a brand new app for us. And we can see our app in the dashboard over here. So let me go ahead and click on that link. And here we can see the overview of our app. So we have an active sandbox, which is deployed to AWS in the US East 1 region. And currently, there isn't much happening here.

[02:46] But we can see that we can use schedules and tasks and events and storage and many other things in our AMPed applications. So let's go to the code editor to see what exactly was deployed to AWS. So this is the project that was generated for us.

[03:01] And if I open up the index.ts file, we can see that this file is creating an express server. We are also importing HTTP module from AMPed SDK. Over here, we are defining three different routes. So there's a route for hello, greet slash name. There's also a post submit.

[03:18] And over here, we are passing the express app to AMPed in order for it to do its magic. Let's go back to the terminal for a second. Here we can see that AMPed has provisioned a personal sandbox for us.

[03:29] A sandbox is your own personal development workspace that automatically syncs and deploys changes from your local environment into the cloud in under a second. Let's give it a shot. So I'm going to go ahead and copy that. And I'm going to test the hello route. So it should respond with a 200 and a message hello from the public API.

[03:48] So let me just go ahead and hit that. API slash hello. And here it is. Hello from the public API. So I'm going to modify it to hello, egghead, friends from the public API. I've saved those changes. We can see that AMPed has successfully updated our code in a few seconds.

[04:07] And if I hit this endpoint again, we can see that those changes were deployed. And for the record, this part of the video is not edited. Let me just go ahead and add some more characters over here. Save. Go ahead. Hit this endpoint again. And we can see that our code changes were already deployed into the cloud.

[04:26] So in addition to getting all of our infrastructure configured for us in AWS cloud, we also get a very fast feedback loop.

https://app.egghead.io/api/v1/lessons/netlify-set-up-a-vite-project-with-react-and-typescript/transcript

https://app.egghead.io/api/v1/lessons/netlify-set-up-vite-local-dev-with-the-netlify-cli/subtitles

Instructor: [0:00] To set up local dev for a React and TypeScript project created by Vite, we're going to be using Netlify Dev and the Netlify CLI. We're going to install that globally by running npm i -g. That's a global install of Netlify CLI at latest.

[0:18] We are now able to run the Netlify Dev command, which will open up our site in localhost:8888. This auto-detected that it's a Vite project, which allows us to very quickly set up a local development environment that simulates the Netlify production environment.

https://app.egghead.io/api/v1/lessons/netlify-set-up-vite-local-dev-with-the-netlify-cli/transcript

https://app.egghead.io/api/v1/lessons/react-add-typescript-powered-serverless-functions-to-a-netlify-project/subtitles

Instructor: [0:00] To add a TypeScript-powered serverless function to any Netlify project, we can start by installing the type definitions for Netlify functions. We're going to do that with npm i @netlify/functions. This is a helper package with several utilities, including an export of types for serverless functions.

[0:18] Next, let's open up our project in VS Code by running code ., that'll take us to the current project. We're going to create a new function. That's going to live in a folder called @netlify/functions. Then, we're going to create helloworld.ts. The ts is so that Netlify knows that it is a TypeScript function.

[0:39] Inside here, let's import Handler from Netlify functions. Then, we're going to export a const called Handler. That is going to be a return type of handler. That's an async function and it's going to return a status code of 200 for OK, and a body of hello TypeScript.

[1:04] Now that we've got that saved, we can run Netlify dev and we'll notice that something changes here. First, it still detected that we're running Vite. It's going to run that Vite server, but it also detected that we have a function, so it starts a function server.

[1:24] All of that runs under the 8888 Port. This allows us to simulate the production environment of running on Netlify. We've got our regular site running here, but we can also go and navigate to that serverless function by going to @netlify/functions/HelloWorld.

[1:43] We can see the result, Hello Typescript. This has live editing. If we change this to say hello world and we reload, we have hello world again. This is a really powerful way to very quickly build TypeScript powered things.

[1:59] You can see that we didn't need to do any kind of compiling. Netlify just picked it up, auto-detected that it was a TypeScript function, and everything runs as expected.

https://app.egghead.io/api/v1/lessons/react-add-typescript-powered-serverless-functions-to-a-netlify-project/transcript

https://app.egghead.io/api/v1/lessons/react-create-a-form-with-react-hooks/subtitles

Instructor: [0:01] To create a form that we can submit to the serverless function, we're going to edit this main page in the Vite project. Let's start by opening up the src folder and then editing App.css. We're not going to keep any of this, so let's just put in some CSS here.

[0:16] I'm not going to go over how the CSS works because it's not part of what we're learning today, but you can see it in the code sample attached to this lesson. Next, open up App.tsx. We're going to replace that with an entirely new bit of code here. We can delete everything in here and start afresh.

[0:34] We haven't created this yet, but we're going to create a component called Form. We're going to start by importing that, so import Form from componentsForm. That's where it's going to live. Then we're also going to import that App.css that we just edited.

[0:51] Finally, we're going to create a function called App() that has no arguments, and it's going to return some JSX. We're going to start with a fragment here. That's so that we don't get any junkie markup.

[1:05] Then we're going to put in a header. Inside the header, we're going to give it an H1. We'll say, serverless Typescript+React. Then underneath our header, we're going to create a main. In our main, we'll use that form component that we still need to create.

[1:22] Down below this, we are going to export default app, so that our site can load. This is going to break if we save right now because we haven't created that form yet. Let's go ahead and get that created before we save. I'm going to go ahead and create a new file.

[1:37] This is going to live in a folder called Components. Let's do some styles first. We'll do form.module.CSS. Inside of this, I'm going to again, not talk about how the CSS works. I'm just going to drop it in so that we have it ready to go. You can see it in the code sample for this lesson.

[1:54] Then we're going to create a new file called form.tsx. That is so that we know that it is a Typescript file that's using JSX. The first thing that we want to do is we are going to be storing a little bit of state for our form. We're going to import useState from React.

[2:12] Then we want to use those styles we just created. Let's import styles from our form.module.CSS. Then, we're going to export a function called Form(). This is going to be our component. It doesn't take any props so we can just jump right inside and we'll say, const name.

[2:32] That's going to be the first piece of data we'll store. We need a way to set that piece of data. Then it's going to be useState with an empty string. By default, there's no value set. Then we're going to go in here and add another one for our favorite color. That's what this form is going to ask for, your name and your favorite color. We'll set name, set favorite color. Again, that's useState and we'll default to an empty string.

[2:57] Then we're going to return some JSX, which will be the actual markup for the form. Let's start by putting it in a fragment. In here, we'll set up a form and we want to use those styles that we set up. This is a CSS module syntax.

[3:12] If you're not familiar with that, you can check for a link on how CSS modules work. We're not going to go into depth here. Inside our form, we're going to set up a label that's going to need an HTML 4, and we'll give it an HTML 4 for name.

[3:27] Then we'll give it a class name of styles.label. Inside of it, we'll say name. Then underneath, we're going to set up an input and that's going to have a name of name. It also needs an ID of name to match up with that HTML 4 up above.

[3:45] We'll give it a class name of styles.input, a type of text, and on change. This is so that when someone types into the form, we actually do something with it. That's going to have a callback function. We'll use E as shorthand for event because this is a one liner.

[4:05] We're going to set name to E.target.value. Whenever somebody edits that field, we'll just update the state. Then the value will initially be set to name. Now we've created what's called a controlled component in React.

[4:21] Next, we want to just duplicate this whole thing and we're going to trade it out to be favorite color this time. Let's just edit all of these to be favorite color. We'll come in here and edit this one to be favorite color.

[4:41] Then we just need to edit out this one to be set favorite color, and this will also be favorite color. Now that we've created that, we can set up our button to actually submit the form. That's going to be a button. It'll have a class name of styles.button, and we'll say submit.

[5:05] That should be our form. We can go ahead and save this. We can go back to our app.tsx, and save that. If we come out here, we can see that we've created a form. This form doesn't actually do anything.

[5:18] If I go in here and submit it, it just does the default thing, which is to submit as a query string to itself, and that's OK. That is not a bad way for this to go. It means that we've created a functional form, and it is in fact submitting the form when we hit this button. We just need to make sure that next, we actually submit it somewhere for processing.

https://app.egghead.io/api/v1/lessons/react-create-a-form-with-react-hooks/transcript

https://app.egghead.io/api/v1/lessons/react-create-a-serverless-form-submission-handler-with-typescript/subtitles

https://app.egghead.io/api/v1/lessons/react-create-a-serverless-form-submission-handler-with-typescript/transcript

By default, JavaScript allows you to mutate global objects. We've seen how when you call `lockdown()` from the ses library that it makes all of JavaScript's shared global objects immutable. 

This is great, but the rest of our JavaScript code that we write can still be tampered with.

Say we have this counter object that holds some state and has methods for incrementing and decrementing that state. 

```js
const makeCounter = () => {
  let count = 0;
  return {
    count,
    incr() {
      this.count += 1
      return this.count;
      },
    decr() {
      this.count -= 1
      return this.count;
      },
  };
};

const myCounter = makeCounter();
myCounter.incr();
myCounter.incr();
myCounter.incr();
myCounter.decr();
console.log(myCounter); // { count: 2, incr: {}, decr: {} }

```

Someone can come in and mutate our object. 
  
```js
const myCounter = makeCounter();
myCounter.incr();
myCounter.incr();
myCounter.count = 'hehehehe';
myCounter.incr();
myCounter.decr();
console.log(myCounter); // { count: NaN, incr: {}, decr: {} }
```

This completely breaks our program. The first thing we can do to prevent this type of tampering is to make `count private`.

```js
const makeCounter = () => {
  let count = 0;
  return {
    incr() {
      this.count += 1
      return this.count;
      },
    decr() {
      this.count -= 1
      return this.count;
      },
  };
};

const myCounter = makeCounter();
myCounter.incr();
myCounter.incr();
myCounter.incr();
myCounter.count = 'hehehehe';
myCounter.decr();
const lastValue = myCounter.incr();
console.log({lastValue}); // { lasValue: 3 }
```

This prevents us from directly accessing `count` and mutating it but we can still mutate our methods.

```js
const myCounter = makeCounter();
myCounter.incr();
myCounter.incr();
myCounter.incr();
myCounter.incr = () => {
  console.log('I have hijacked your increment. There is nothing you can do.');
};
myCounter.decr();
const lastValue = myCounter.incr();
console.log({lastValue}); // { lasValue: undefined }
```

These methods need to be accessible to people because that's the API we want to expose so we can't just make them private.

We can use the `harden` function from the ses library to make our methods tamper-proof.

```js
const makeCounter = () => {
  let count = 0;
  return harden({
    incr() {
      this.count += 1
      return this.count;
      },
    decr() {
      this.count -= 1
      return this.count;
      },
  });
};
```

This locks down the object and prevents anyone from mutating it. Now if you try to reassign `incr` you'll get an error telling you `TypeError: Cannot assign to read only property 'incr' of object '[object Object]'`.

https://app.egghead.io/api/v1/lessons/react-submit-form-data-to-a-netlify-serverless-function/subtitles

Prevent JavaScript Object Tampering with the SES Library harden Function

[00:00] In this file we have the sess library being imported and What we're going to do here is just invoke the lockdown Function it gives us access to now by calling lockdown We are introducing a few different changes to our program

[00:18] One of those is that we are making all of JavaScript's shared global objects Immutable so as a result these is frozen checks are going to return true for us And if we remove them, we'll see that they quickly revert back to being false

[00:37] This is great as we've made our global objects immutable But let's see how we can continue and make the rest of our JavaScript code tamper-proof So here, I'm just creating a make counter function and then inside here I'll initialize a count variable to be zero

[01:01] And then we're just going to return this Alongside methods for incrementing and decrementing And so our increment method is Is going to shockingly Increase the count by one each time. It's called while decrement is going to take one away from work

[01:28] Now that we have that wired up. It's going to create this my counter variable using our make counter function and Then I'm going to Invoke the increment and decrement methods a few times and Lastly, we'll just log out my counter to see what we're working with

[01:53] If we take a look in the console we see that count is two and Three minus one equals two so our math checks out there Everything is Going smoothly, but oh no Somewhere along in our program My counter was mutated

[02:15] The count property is now this string of he he's and So this is less than ideal as we'll find our count variable is now Showing us not a number So what changes can we make to prevent this? so for one let's

[02:35] Stop returning this count property altogether Let's make it private to our function Now instead of using the this keyword we can just operate directly on this count all right, so now I'm just going to create a last value variable and set it equal to

[02:59] the result of my counter dot increment and now if we look in the console we see that we've successfully prevented our program From running into such issues as Last value is printing the correct value So we're moving in the right direction but let's see what happens if we

[03:23] Try to actually mutate one of our methods and here. I'm just going to change our increment and For right now, we're just going to have it log out the statement I

[03:39] Have hijacked your increment it. There's nothing you can do and I'm just going to place this above any other Increment thins to really screw things up here and if we look oh, I need to correctly mutate this and

[04:00] Remove this parentheses here Now that that's fixed if we inspect our council Oh We see that this message is shown for us over and over and over again So not good as we still have some holes we need to plug and

[04:26] This is where the sass library can help us once again Specifically we can turn to this harden function Which is going to be made globally available to us once lockdown is invoked Harden is going to take objects and work to them recursively

[04:50] making each property tamper proof so here we can see that we're just using it to make our counters methods tamper proof and The result of this is that Our code now throws an error Saying cannot assign to read-only property Incra

[05:12] so now let's remove this because we can no longer change the value of anything within our my counter object and Now if we go back, we'll see that our program is behaving correctly again

https://app.egghead.io/api/v1/lessons/react-submit-form-data-to-a-netlify-serverless-function/transcript

https://app.egghead.io/api/v1/lessons/netlify-deploy-a-vite-project-with-the-netlify-cli/subtitles

Instructor: [0:00] Now that we've got this app running, let's get it up live on the Internet. The first thing I'm going to do here is I'm going to run git init to set it up as an empty git repository, so that we can use it. I'm using what's called the GitHub CLI to create this repo. This is one of my favorite tools. We're not going to go deep into how it works.

[0:18] I've just installed the GitHub CLI. I can run gh repo create, and because I'm in my default account and I've named this folder what I want the repo to be, I can actually just hit enter. It will auto-fill with Egghead Serverless TypeScript, which is exactly what I wanted.

[0:37] I'm going to skip through the description, and I want this to be public. Here we go. It gives me a confirmation. I hit Yes. I have created that repo. I want to make sure that we've got everything we want here. This is a generated file here, this .netlify. I want to make sure we don't include that in the committed files. I'm going to echo .netlify into the .gitignore.

[1:03] This double greater-than symbol means that it's going to append to the end of .gitignore. This is a handy way to quickly add one line to a file. When I hit enter, that's now in there. If I run my git status again, we can see that .netlify is no longer included.

[1:18] That means I can gitadd everything, gitcommit, and we'll give this a feature of working typescript form plus serverless function. Then I can gitpush and I want to set the upstream with -u. We'll do origin main. This gets pushed up live.

[1:40] If I click on this, I can see we've created that repo. It's up live, everything that we wanted to be in there is in there. There is our submit.ts. This thing's ready to deploy. The first thing first, I have the Netlify CLI installed, so I'm going to run Netlify login.

[2:00] I'm already logged in. If I wasn't, it would pop open the browser and ask me to confirm that I wanted to login with the CLI. I would confirm that, it would send me right back here. Now that I've done that, I can run Netlify init.

[2:12] This is going to walk me through setting up a new project. I want to create and configure a new site. I want to put this in my own team, and I'm going to call this, Egghead serverless typescript. We can see here, it's going to be at this address inside the Netlify app.

[2:34] It's going to create a public URL of Eggheadserverlesstypescript.netlify.app. These need to be unique, so you won't be able to use the same name as me. You can also leave it blank and it will auto-generate one for you. Either way, it doesn't matter. You can set up a custom domain later on in the app. For this particular project, we're not going to do that. Some defaults get set up here. It auto-detected Vite again.

[2:55] It shows us Vite build. That's what I want. Dist is the default folder for Vite to build to, so we can hit enter again. It also knows that Netlify functions is the default folder, so we can hit enter. Once we've done that, it's going to go through and set everything up.

[3:09] It is now created. We've got Netlify set and running. If I run Netlify open, it's going to open in the browser, the Netlify dashboard so that I can see this site running. We can click in here. Here's the deploy in progress. Here we go. 2.7 seconds to build.

[3:27] That's because Vite is wicked fast. The functions bundled very, very quickly as well, and the site is already live. I can head over now and view it. Here is our running site. This is actually live on the Internet. You can go and visit it right now. If I put in my name and we'll put in a color of chartreuse, our function is also running.

[3:51] Its admitted to that function. My name is Jason. My favorite color is chartreuse. We've got this thing running. You have now successfully created, tested, and deployed a typescript powered React project, as well as typescript powered serverless functions all to Netlify. Congratulations.

https://app.egghead.io/api/v1/lessons/netlify-deploy-a-vite-project-with-the-netlify-cli/transcript

Deploy a Serverless API React Application with TypeScript

Jason Lengstorf

Credits

Course Content