Develop locally with Wrangler 2

Obinna Ekwuno: [0:00] Now that we have our environment variables set up, we would have to go over to documentation and see how we can run our Pages project locally. You can do this by using wrangler 2, which is currently in beta. We'll copy this command and head back to our terminal. It's important to note that Node version 16 or above is required for wrangler 2 to run on your local.

[0:31] Now that we have that set up, we will run the npm install wrangler@beta. When that is done, if you head over to your package.json, you can see that wrangler has been successfully installed.

[0:48] If we head back to documentation, you see a list of helpful commands. In this case, we'll be using the help command to be able to see this list in our terminal. This command shows a list of all the options and flags that we can use while running wrangler 2 locally.

[1:09] To run our site locally, we'll say, npx wrangler pages dev, followed by the build command of your Next.js sites, which is npx next dev. This will automatically open up our sites in the browser.

[1:37] If we head back to our code, since the form is going to be submitted using these functions directory that we have created, we would want to add that to the components that handles our form submission.

[1:51] If we open that up, and replace the URL of our walker, with the relative paths of our function, you will not need to include the function's name in our directory, because Cloudflare pages looks within that directory to find your serverless functions, not including the function's name.

[2:18] After you've done this, your function should hit the API/forms route, when you submit your form. Since you're using environment variables, you will need to add some bindings to our build command, to be able to see our form submit locally.

[2:38] You can add this command to your dev command by adding your regular run command, followed by the binding flag, then your environment variables, followed by your regular build command for your next sites.

[2:54] In the terminal, type npm run dev. This will build a local version of your sites that will be able to build on Cloudflare pages platform. It's important to note that this feature is still in beta, and the developer experience is still being worked on. Now, when you fill in the form, you'd see that your request has been submitted.

[3:21] Now that we have this running locally, we want to push this off to Cloudflare pages platform, to see how it builds. We do this by using gates to push our changes to our repository, so that the changes would automatically trigger a build on Cloudflare pages.

[3:38] If we head over to our browser and go to pages.cloudflare.com and log in, we can see that a build has automatically been triggered by the push we just made to GitHub. We'd want to cancel this build, so that we can be able to add our environment variables to the build settings.

[4:03] After adding environment variables, we can now try the deployments. For the sake of this lesson, I didn't include my environment variables, but it's important to note that you can add environment variables for both production and for a preview, to make sure that you're testing the right environment while building.

[5:11] That is over. If you go over to the preview link and fill out the form again, you can see that your response is recorded accordingly.