Scaffolding the news app

1. Scaffolding the news app

Welcome back!

2. Scaffolding the news app

In this video, we’ll learn how to scaffold a full-stack React + Node news app in Windsurf and securely set up our News API key. By the end of this video, we’ll have a fully working template that can fetch live news updates, ready to evolve from prototype to production in record time.

3. News app in action

When we first open Windsurf, it gives us a prompt to generate a new project. Here, we have two options: Pick from an existing template that Windsurf provides; Or type our own custom stack if we want more control. For this example, let’s ask for a React Frontend with Node Backend for a basic app that fetches news updates. This setup is perfect for a news app, since React will handle our dynamic UI while Node.js can manage API requests and server logic.

4. Step 1: Project plan

Once we hit enter, Windsurf’s Cascade gets to work: First, it creates a project plan in Markdown, which includes: Notes about the project’s goal. A task list to guide development. A brief feature summary for our app.

5. Step 2: Entire project

Based on the plan, it generates the entire project with a React frontend and a Node.js backend, automatically setting up a workspace with all starter files in place.

6. Last step: Fetching updates via API

Now, to fetch live news updates, we need to connect to a News API securely. This means we’ll store our API key using environment variables. There are two ways to do this in Windsurf: The first option is to use the template approach.

7. Template approach

We start by opening a new text file. Windsurf shows a prompt to select a language or use a template. From this list, we choose Environment Variables. This automatically creates a .env file with the correct syntax, ready to accept our API key.

8. Manual approach

The second option is a manual setup: We go to the root of our project. Create a new file named .env. And paste our API key. In this project, Windsurf actually generated the necessary files automatically, so we have a .env file already set up and all we need to do is paste our key and save.

9. Security tips

The best part is that API keys remain hidden and secure in Windsurf, while the frontend can still access them safely through environment variables. When pushing the code to GitHub, we should make sure that the .env file is inside a .gitignore file to prevent it from being tracked by Git and pushed.

10. Running the app

With the project scaffolded and API key ready, let’s run the app. Let’s ask Cascade to do it and within a few minutes, Windsurf will start both the backend and the React frontend automatically. We have a live development server running our full-stack news app. In just a few minutes, Windsurf has taken us from an empty workspace to a scaffolded, secure, and running news application. This process would normally take hours to configure manually—setting up React, Node.js, environment variables, and project structure. With Windsurf’s project generation and smart file handling, we can do it in just a few minutes.

11. Let's practice!

Now, it’s your turn to 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.