Deploying, monitoring & iterating

1. Deploying, monitoring & iterating

Hey everyone! In the previous video, we learned about implementing secure authentication and applying crucial security checks.

2. From local to production

In this video, we’ll learn how to take our secure News app from running locally to being deployed on a production server. We’ll also learn about setting up health-check agents in real time — all with just a few clicks in Windsurf.

3. Deploying from the IDE

In Windsurf, we can deploy apps directly from the IDE through the app deploy feature. This is a rocket icon located in the Cascade panel, as shown. Although the interface location can change as Windsurf gets updated, the basic functionality of the feature remains the same.

4. Flexibility of Windsurf Deploy

App Deploy lets us deploy web applications and sites directly within Windsurf, allowing us to share our work through public URLs, update our deployments, and claim projects for further customization.

5. Windsurf Deploy in action

Windsurf currently supports Netlify as their deployment provider. Let’s see this in action.

6. Windsurf Deploy in action

We’ll open the news app we built inside Windsurf. We need to deploy it to make it live. We can either click the deploy icon or simply type this prompt in the Cascade input box: “Deploy this project to Netlify”. Windsurf will automatically analyze the project and detect the framework, which in our case is React, and prepare it for deployment. It packages the build, connects to Netlify, and finally, we get a public URL to preview our site. This is live and accessible from anywhere.

7. Configuring health-check agents

To watch over our app with Windsurf, let’s configure health-check agents. These agents periodically ping our News App endpoints to verify they’re responsive and performing well. To define this we’ll create a new workspace workflow in our updated Windsurf and add a YAML configuration containing a name, description, and run configurations. Upon running this workflow, Windsurf will automatically notify us if the app becomes unreachable or exhibits errors, helping us catch issues before users do.

8. Claiming our project

Next, if we type “claim my project” in the input box it will transfer the deployment into our own Netlify account. That way we can set up custom domains, environment variables or CI workflows, whatever we need. Windsurf even generated a Netlify.toml file for us, so redeploying later is easy. Deploying our News App with Windsurf is fast, reliable, and gives us confidence that the users will get the best experience possible.

9. Let's practice!

Before we wrap up, let's get some more practice!

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.