Set up a new site for local development with Netlify Dev

Return JSON data from a serverless function using Netlify Functions

Use the native Fetch API to load JSON data into an HTML page

Use HTML templates to display JSON data

Set up a GitHub repository for automatic deploys using Netlify’s CLI

Use Netlify environment variables during local development

Use serverless functions to handle the Stripe Checkout flow on Jamstack sites

Sell Products Using Stripe Checkout and Netlify Functions

Set up the HTML and CSS for a website to sell products and configure it for local development using [Netlify Dev](https://www.netlify.com/products/dev/?utm_source=egghead&utm_medium=setup-ntl-dev-jl&utm_campaign=devex).

Jason Lengstorf: [0:02] Starting from your command line, create a new directory. We're going to call this one stripe-checkout-netlify-serverless. Then, we're going to move into it. Inside, we want to git init. Then, we're going to run yarn init -y.

[0:25] Now that we have it initialized, we can open it up in our code editor of choice, and inside, we have our package.json. We're going to start by creating a .gitignore, and inside of that, we're just going to have node_modules for now.

[0:43] Then, we're going to create a new folder called public, and inside of that we're going to create index.html. Inside of index.html we want to create a standard html document, so we've got a DOCTYPE html with the lang attribute set, we've got the charset and the viewport.

[1:03] We're going to give this a title of Stripe Checkout + Netlify Functions. Inside, we're going to add a basic header. That header is going to include a link to the root. We'll give it a rel of home, and then we're going to say Serverless Workflow for Stripe Checkout. Underneath that, we're going to set up a main and we'll say Buy Our Products!

[1:41] Next, we're going to create a CSS file, so inside of public we're going to create css/main.css, and inside that we're going to add some basic styles. We'll start out by setting up the box-sizing be border-box. That gives us better control over the margin padding and borders. We don't have to do weird sizing math.

[2:09] Then we're going to use the system font which I have a shortcut for. We just want to use whatever device font is installed. Then we're going to set the margin to .

[2:23] Below that we want to set up our header. We're going to say that the background is teal, and the padding is going to be 1 relative em size on the top and bottom and 5 viewport width units or about five percent on the left and right.

[2:42] We want that link to be white, so that it's legible against the teal. We want it to have a heavier font weight, so we're going to set that to about 800. Then, we're going to set the text-decoration to none, so we don't need another one for that one.

[3:00] For the main, we're going to set up the margin as 4 relative em units, auto, and then 6 on the bottom. We're also going to set the max width to be 650 pixels. We'll set the general width to be about 90 percent of the viewport width. Once we save that, we can head back to our index.html. We're going to include that, so link rel="stylesheet" and we'll make the href="css/main.css".

[3:36] Once we've saved that, we're going to make sure that we've got the Netlify CLI installed. We can install that with npm i -g netlify-cli. I already have it installed, so I'm not going to run that, but we have which netlify, or my preference, the shorter version ntl is going to let us run Netlify command.

[4:00] I'm going to make sure that I am logged in. I am logged in. If I wasn't, it would take me to the Netlify site to authenticate. Next, we're going to create a netlify.toml which tells us where our public folder is. These are the files we're going to get served. In our case, we want to publish just the public folder because we only want the index.html and the css to be published live.

[4:31] We'll save that. Then, now that we're logged in to Netlify, we can run ntl dev. This is going to open up a browser window for us that shows us what we've built. Here is our header, we've got a link back to the home page, and then it says, "Buy Our Products!"

Course

Sell Products Using Stripe Checkout and Netlify Functions

Set up a new site for local development with Netlify Dev

Share this video with your friends