Skip to content

Update build-a-hello-world-web-part.md for SPFx 1.22 gulp to heft mig… #10534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ashlesha-MSFT wants to merge 2 commits into
base: main
Choose a base branch
from
+40 −44
Open

Update build-a-hello-world-web-part.md for SPFx 1.22 gulp to heft mig… #10534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
66b6821
Update build-a-hello-world-web-part.md for SPFx 1.22 gulp to heft mig…
Ashlesha-MSFT Dec 18, 2025
f34f891
Update connect-to-sharepoint.md for SPFx 1.22 gulp to heft migration
Ashlesha-MSFT Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 28 additions & 31 deletions docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Build your first SharePoint client-side web part (Hello World part 1)
description: Create a new web part project and preview it.
ms.date: 04/23/2025
ms.date: 12/18/2025
ms.localizationpriority: high
ms.custom: scenarios:getting-started
---
Expand All @@ -22,7 +22,6 @@ You can also follow these steps by watching this video on the Microsoft 365 Plat

> [!Video https://www.youtube.com/embed/6WTtjXP5yW4]

[!INCLUDE [spfx-gulp-heft-migration-wip](../../../../includes/snippets/spfx-gulp-heft-migration-wip.md)]

## Create a new web part project

Expand All @@ -46,11 +45,11 @@ When the project scaffolding and dependency install process are complete, Yeoman

```console
_=+#####!
###########| .-----------------------------------.
###/ (##|(@) | Congratulations! |
### ######| \ | Solution webpart-1 is created. |
###/ /###| (@) | Run gulp serve to play with it! |
####### ##| / '-----------------------------------'
###########| .------------------------------------------.
###/ (##|(@) | Congratulations! |
### ######| \ | Solution helloworldwebpart is created. |
###/ /###| (@) | Run npm run start to play with it! |
####### ##| / '------------------------------------------'
### /##|(@)
###########|
**=+####!
Expand All @@ -74,7 +73,7 @@ The SharePoint Framework documentation uses Visual Studio Code in the steps and

## Preview the web part

You can preview and test your client-side web part in the SharePoint hosted workbench without deploying your solution to SharePoint. This is done by starting a local web server the hosted workbench can load files from using the gulp task **serve**.
You can preview and test your client-side web part in the SharePoint hosted workbench without deploying your solution to SharePoint. This is done by starting a local web server the hosted workbench can load files by using the **Heft start** command.

The client-side toolchain uses HTTPS endpoints by default. Part of the [Set up your development environment](../../set-up-your-development-environment.md) process included trusting the development SSL certificate included in the toolchain on your local environment. This is required so your browser will trust the certificate.

Expand All @@ -88,38 +87,36 @@ The client-side toolchain uses HTTPS endpoints by default. Part of the [Set up y
Assuming you've installed & trusted developer certificate, execute the following command in the console to build and preview your web part:

```console
gulp serve
heft start
```

This command executes a series of gulp tasks to create and start a local webserver hosting the endpoints **localhost:4321** and **localhost:5432**. It will then open your default browser and load the hosted workbench preview web parts from your local dev environment.
This command runs a series of Heft tasks to create and start a local webserver hosting the endpoints **localhost:4321** and **localhost:5432**. It will then open your default browser and load the hosted workbench preview web parts from your local dev environment.

```console
gulp serve
Build target: DEBUG
[12:13:24] Using gulpfile d:\pnp\helloworld-webpart\gulpfile.js
[12:13:24] Starting 'serve'...
[12:13:24] Starting gulp
[12:13:24] Starting subtask 'spfx-serve'...
[12:13:24] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/build/manifests.js
[12:13:25] Starting server...
[12:13:25] Finished subtask 'spfx-serve' after 1.24 s
[12:13:25] Starting subtask 'pre-copy'...
[12:13:26] Finished subtask 'pre-copy' after 533 ms
[12:13:26] Starting subtask 'copy-static-assets'...
[12:13:26] Starting subtask 'sass'...
[12:13:26] Server started https://localhost:4321
[12:13:26] LiveReload started on port 35729
[12:13:26] Running server
[12:13:26] Opening https://sppnp.sharepoint.com/_layouts/workbench.aspx using the default OS app
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:4321/, https://[::1]:4321/
[build:webpack] Started Webpack Dev Server at https://[::1]:4321/
[build:webpack] Running incremental Webpack compilation
[build:configure-webpack-serve] Request: /temp/build/manifests.js
<i> [webpack-dev-middleware] wait until bundle finished: /temp/build/manifests.js
New run requested by typescript
Cancelling incremental build...
[build:configure-webpack-serve]
[build:configure-webpack-serve] ══════════════════════════════════════════════════════════════════
[build:configure-webpack-serve] To load your scripts, use this query string:
[build:configure-webpack-serve] ?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fbuild%2Fmanifests.js&debug=true&noredir=true
[build:configure-webpack-serve] ══════════════════════════════════════════════════════════════════
[build:configure-webpack-serve]
webpack 5.95.0 compiled successfully in 41820 ms
```

SharePoint client-side development tools use [gulp](http://gulpjs.com/) as the task runner to handle build process tasks such as:
SharePoint client-side development tools use [heft](https://heft.rushstack.io/) as the task runner to handle build process tasks such as:

- Transpile TypeScript files to JavaScript.
- Compile SASS files to CSS.
- Bundle and minify JavaScript and CSS files.

VS Code provides built-in support for gulp and other task runners. Select <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>B</kbd> on Windows or <kbd>CMD</kbd>+<kbd>SHIFT</kbd>+<kbd>B</kbd> on macOS to debug and preview your web part.
VS Code provides built-in support for heft and other task runners. Select <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>B</kbd> on Windows or <kbd>CMD</kbd>+<kbd>SHIFT</kbd>+<kbd>B</kbd> on macOS to debug and preview your web part.

The SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint Workbench includes the client-side page and the client-side canvas in which you can add, delete, and test your web parts in development.

Expand Down Expand Up @@ -390,11 +387,11 @@ The **HelloWorldWebPart.manifest.json** file defines the web part metadata such
Now that we have introduced new properties, ensure that you're again hosting the web part from the local development environment by executing the following command. This also ensures that the previous changes were correctly applied.

```console
gulp serve
heft start
```

## Next steps

Congratulations on getting your first Hello World web part running!

Now that your web part is running, you can continue building out your Hello World web part in the next topic, [Connect your web part to SharePoint](./connect-to-sharepoint.md). You will use the same Hello World web part project and add the ability to interact with SharePoint List REST APIs. Notice that the **gulp serve** command is still running in your console window (or in Visual Studio Code if you're using that as editor). You can continue to let it run while you go to the next article.
Now that your web part is running, you can continue building out your Hello World web part in the next topic, [Connect your web part to SharePoint](./connect-to-sharepoint.md). You will use the same Hello World web part project and add the ability to interact with SharePoint List REST APIs. Notice that the **heft start** command is still running in your console window (or in Visual Studio Code if you're using that as editor). You can continue to let it run while you go to the next article.
25 changes: 12 additions & 13 deletions docs/spfx/web-parts/get-started/connect-to-sharepoint.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Connect your client-side web part to SharePoint (Hello World part 2)
description: Access functionality and data in SharePoint and provide a more integrated experience for end users.
ms.date: 11/22/2022
ms.date: 12/19/2025
ms.localizationpriority: high
ms.custom: scenarios:getting-started
---
Expand All @@ -16,15 +16,14 @@ You can also follow these steps by watching this video on the Microsoft 365 Plat
> [!NOTE]
> This article continues building the Hello World web part built in the previous article [Build your first web part](./build-a-hello-world-web-part.md).
[!INCLUDE [spfx-gulp-heft-migration-wip](../../../../includes/snippets/spfx-gulp-heft-migration-wip.md)]

## Run gulp serve
## Run heft start

Ensure that you have the **gulp serve** command running. If it isn't already running, go to the **helloworld-webpart** project directory and run it by using the following commands.
Ensure that you have the **heft start** command running. If it isn't already running, go to the **helloworld-webpart** project directory and run it by using the following commands.

```console
cd helloworld-webpart
gulp serve
heft start
```

## Get access to page context
Expand Down Expand Up @@ -65,14 +64,14 @@ this.context.pageContext
```

1. Notice how `${ }` is used to output the variable's value in the HTML block. An extra HTML `div` is used to display `this.context.pageContext.web.title`.
1. Save the file. The **gulp serve** running in your console detects this save operation and:
1. Save the file. The **heft start** running in your console detects this save operation and:

- builds and bundles the updated code automatically

> [!NOTE]
> Keep the console window and Visual Studio Code side-by-side to see gulp automatically compile as you save changes in Visual Studio Code.
> Keep the console window and Visual Studio Code side-by-side to see heft automatically compile as you save changes in Visual Studio Code.

1. Navigate to your SharePoint site's hosted workbench hosted. The full URL is `https://your-sharepoint-site-url/_layouts/workbench.aspx`. Refresh the hosted workbench to pick up the changes from the rebuilt code bundle.
1. Navigate to your SharePoint site's hosted workbench. The full URL is `https://your-sharepoint-site-url/_layouts/workbench.aspx`. Refresh the hosted workbench to pick up the changes from the rebuilt code bundle.

You should now see your SharePoint site title in the web part now that page context is available to the web part.

Expand Down Expand Up @@ -131,7 +130,7 @@ SharePoint Framework includes a helper class `spHttpClient` to execute REST API
The method uses the `spHttpClient` helper class and issues an HTTP **GET** request. It uses the `ISPLists` interface and also applies a filter to not retrieve hidden lists.

1. Save the file.
1. Switch to the console window that is running **gulp serve** and check if there are any errors. If there are errors, gulp reports them in the console, and you need to fix them before proceeding.
1. Switch to the console window that is running **heft start** and check if there are any errors. If there are errors, heft reports them in the console, and you need to fix them before proceeding.

## Add new styles

Expand Down Expand Up @@ -177,7 +176,7 @@ The SharePoint Framework uses [Sass](http://sass-lang.com/) as the CSS pre-proce
1. Save the file.
Gulp rebuilds the code in the console as soon as you save the file. This generates the corresponding typings in the **HelloWorldWebPart.module.scss.ts** file. After compiled to TypeScript, you can then import and reference these styles in your web part code.
Heft rebuilds the code in the console as soon as you save the file. This generates the corresponding typings in the **HelloWorldWebPart.module.scss.ts** file. After compiled to TypeScript, you can then import and reference these styles in your web part code.
> [!TIP]
> This file is dynamically generated when the project is built. It's hidden from VS Code's Explorer view using the **.vscode/settings.json** file.
Expand Down Expand Up @@ -209,7 +208,7 @@ Open the `HelloWorldWebPart` class.
</ul>`;
});

if(this.domElement.querySelector('#spListContainer') != null) {
if(this.domElement.querySelector('#spListContainer') !== null) {
this.domElement.querySelector('#spListContainer')!.innerHTML = html;
}
}
Expand Down Expand Up @@ -258,15 +257,15 @@ Open the `HelloWorldWebPart` class.
1. Save the file.
Notice in the **gulp serve** console window that it rebuilds the code. Make sure you don't see any errors.
Notice in the **heft start** console window that it rebuilds the code. Make sure you don't see any errors.
1. If you're using the SharePoint Framework v1.12.1 or earlier, for instance if you're on SharePoint Server on-premises, switch to your local workbench and add the HelloWorld web part.
You should see the list data returned.
![Render lists data from localhost](../../../images/sp-lists-render-online-workbench.png)
1. Now you can stop the server from running. Switch to the console and stop **gulp serve**. Select <kbd>CTRL</kbd>+<kbd>C</kbd> to stop the gulp task.
1. Now you can stop the server from running. Switch to the console and stop **heft start**. Select <kbd>CTRL</kbd>+<kbd>C</kbd> to stop the heft task.
## Next steps
Expand Down