That’s exactly what environment variables fix. And once you understand how they work in SPFx, you’ll wonder how you ever managed without them.

Let me walk you through everything, from the simplest one-liner fix to more advanced patterns for build-time config injection, so you can pick the approach that fits your project.

Let me explain how to use SharePoint Framework (SPFx) environment variables.

What Are SPFx Environment Variables, Really?

Think of environment variables as settings that live outside your code. Instead of hardcoding https://mytenant.sharepoint.com directly in a config file or TypeScript file, you store it in your operating system (or a .env file), and your project just reads it from there.

This is incredibly useful when:

• You work in a team where everyone has a different SharePoint tenant URL
• You deploy to multiple environments — dev, staging, production
• You don’t want API keys or secrets accidentally committed to your Git repo
• You want your CI/CD pipeline to inject the right values at build time

If you want to learn SPFx development, check out our SPFx training course.

Method 1: The SPFX_SERVE_TENANT_DOMAIN Built-In Variable

This is the easiest method and requires zero npm packages. Microsoft built it directly into the SPFx toolchain.

Here’s how it works: when you run gulp serve or heft start, the build system looks for an OS environment variable called SPFX_SERVE_TENANT_DOMAIN and swaps out the {tenantDomain} placeholder in your serve.json automatically.

Step 1 — Update your serve.json

Open config/serve.json and use the placeholder instead of a hardcoded URL:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://{tenantDomain}/sites/mysite/_layouts/workbench.aspx"
}

Notice {tenantDomain} — The toolchain will replace this at runtime with the value of your OS environment variable.

Step 2 — Set the environment variable

On Windows (PowerShell) — temporary for this session only:

$env:SPFX_SERVE_TENANT_DOMAIN = "contoso.sharepoint.com"

To make it permanent (so you don’t have to set it every time):

[System.Environment]::SetEnvironmentVariable("SPFX_SERVE_TENANT_DOMAIN", "contoso.sharepoint.com", "User")

Here, update ‘contoso‘ with your tenant domain name.

After some time, reopen your SPFx web part Terminal pane, and check whether the variable contains a value or not with this command echo $env:SPFX_SERVE_TENANT_DOMAIN

On macOS / Linux:

export SPFX_SERVE_TENANT_DOMAIN="contoso.sharepoint.com"

To persist it, add that line to your ~/.bashrc or ~/.zshrc.

Step 3 — Run gulp serve as usual

That’s it. The build toolchain replaces {tenantDomain} on the fly before opening the browser. No code changes, no config file edits per developer.

NOTE: If you are using SPFx solutions with gulp packages, then run the gulp serve command to test. In case you are on SPFx version 1.22.*, with the Heft-based tool chain, run the Heft start command.

In the image below, you can see that the initialPage URL in serve.json has a placeholder called {tenantDomain}. Now, instead of hardcoding our SharePoint tenant domain directly in this URL, we created an environment variable called SPFX_SERVE_TENANT_DOMAIN and stored our tenant domain value in it.

So now when we run the heft start command, SPFx is smart enough to automatically read that environment variable and replace the {tenantDomain} placeholder with our actual tenant domain in the URL.

Why I like this method: It’s the simplest possible solution for the most common pain point. It works out of the box with every SPFx version and requires no extra packages. The downside is it only handles the tenant domain/URL for serve.json — it doesn’t help with injecting variables into your TypeScript code.

Method 2: OS Environment Variables in PowerShell (Quick and Practical)

Sometimes you just need to pass a value temporarily before running a command. PowerShell makes this very easy.

Temporary (session only):

$env:SPFX_API_KEY = "my-api-key-12345"
gulp serve

This variable exists only until you close the terminal window.

Permanent (User scope):

[System.Environment]::SetEnvironmentVariable("SPFX_API_KEY", "my-api-key-12345", "User")

Permanent (Machine scope — needs admin):

[System.Environment]::SetEnvironmentVariable("SPFX_API_KEY", "my-api-key-12345", "Machine")

Check if it’s set:

$env:SPFX_API_KEY

Remove it:

# From session only
Remove-Item Env:\SPFX_API_KEY

# Permanently (User scope)
[System.Environment]::SetEnvironmentVariable("SPFX_API_KEY", $null, "User")

In the image above, you can see I removed the current session variable. When I check back, does it still contain a value? It shows empty.

This method is great for quick local testing. But if you’re working in a team, it gets tedious; every developer has to remember to set all the right variables manually. That’s where .env files come in.

Method 3: Using .env Files with dotenv (Recommended for Teams)

This is my favorite approach for team projects with the gulp-based toolchain (SPFx versions before 1.22). You define all your variables in a .env file, exclude them from version control, and dynamically inject them into Webpack during the build process.

Step 1 —  Install Required Packages

Install dotenv to read the files, and cross-env to easily switch environments across Windows, Mac, and CI/CD pipelines.

npm install dotenv cross-env --save-dev

Step 2 — Create your Environment Files

Create a folder named env at the root of your project, and create a file named dev.env (for local development) and prod.env (for production).

# env/dev.env
SPFX_API_BASE_URL=https://dev-api.contoso.com
SPFX_APP_INSIGHTS_KEY=dev-abc123-xyz
SPFX_ENVIRONMENT=development

Step 3 — Add environment files to .gitignore

This is critical. You never want to commit API keys or production secrets to your repository.

# .gitignore
env/*.env
!env/sample.env

(Tip: It is good practice to commit a sample.env with dummy values so new developers know what variables they need to configure).

Step 4 — Update gulpfile.js for Dynamic Injection

Instead of hardcoding every variable, we can configure Webpack to automatically find and inject any variable that starts with SPFX_. Replace your gulpfile.js with this:

'use strict';

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs');
const path = require('path');

// 1. Determine the environment (default to 'dev')
const environment = process.env.NODE_ENV || 'dev';
const envPath = path.resolve(__dirname, `./env/${environment}.env`);

// 2. Load the file if it exists
let envConfig = {};
if (fs.existsSync(envPath)) {
  envConfig = dotenv.config({ path: envPath }).parsed || {};
} else {
  console.warn(`[!] Warning: ${envPath} not found. Proceeding without env injection.`);
}

// 3. Merge into Webpack configuration
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfig) => {
    const definitions = {};

    Object.keys(envConfig).forEach((key) => {
      if (key.startsWith('SPFX_')) {
        definitions[`process.env.${key}`] = JSON.stringify(envConfig[key]);
      }
    });

    generatedConfig.plugins.push(new webpack.DefinePlugin(definitions));
    return generatedConfig;
  }
});

// 4. Force task registration (Fixes "Task never defined" error)
let getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  let result = getTasks.call(build.rig);
  // Ensure serve is properly mapped
  result.set('serve', result.get('serve-deprecated') || result.get('serve'));
  return result;
};

// 5. Initialize build
build.initialize(gulp);

Step 5 — Add TypeScript Typings (Crucial for SPFx)

To prevent TypeScript from complaining that process.env is undefined, create or update a global.d.ts file inside your src folder:

// src/global.d.ts
declare interface NodeJS {
  env: {
    NODE_ENV: 'dev' | 'prod';
    SPFX_API_BASE_URL: string;
    SPFX_APP_INSIGHTS_KEY: string;
    SPFX_ENVIRONMENT: string;
    [key: string]: string | undefined;
  };
}
declare var process: NodeJS;

Step 6 — Use Variables in your TypeScript/React Code

Because of the typings in Step 5, you no longer need as string. You get full IntelliSense autocomplete natively in VS Code.

import * as React from 'react';
import styles from './Listitems.module.scss';
import type { IListitemsProps } from './IListitemsProps';
import { escape } from '@microsoft/sp-lodash-subset';

export default class Listitems extends React.Component<IListitemsProps> {
  public render(): React.ReactElement<IListitemsProps> {
    const {
      description,
      isDarkTheme,
      environmentMessage,
      hasTeamsContext,
      userDisplayName
    } = this.props;

    return (
      <section className={`${styles.listitems} ${hasTeamsContext ? styles.teams : ''}`}>
        <div className={styles.welcome}>
          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
          <h2>Well done, {escape(userDisplayName)}!</h2>
          <div>{environmentMessage}</div>
          <div>Web part property value: <strong>{escape(description)}</strong></div>
        </div>

        {/* --- CUSTOM ENVIRONMENT VARIABLES BLOCK --- */}
        <div style={{ backgroundColor: '#e1dfdd', padding: '15px', margin: '20px 0', borderRadius: '4px', color: '#323130' }}>
          <h3 style={{ marginTop: 0 }}>Environment Variables Test</h3>
          <p style={{ margin: '5px 0' }}><strong>Environment:</strong> {process.env.SPFX_ENVIRONMENT}</p>
          <p style={{ margin: '5px 0' }}><strong>API Base URL:</strong> {process.env.SPFX_API_BASE_URL}</p>
          <p style={{ margin: '5px 0' }}><strong>App Insights Key:</strong> {process.env.SPFX_APP_INSIGHTS_KEY}</p>
        </div>
        {/* ---------------------------------------- */}
      </section>
    );
  }
}

Step 7 — Running and Building for Different Environments
Now, you can easily switch between environments using cross-env. You can add these commands directly to the "scripts" section of your package.json:

"scripts": {
  "serve": "cross-env NODE_ENV=dev gulp serve",
  "build:prod": "cross-env NODE_ENV=prod gulp bundle --ship && gulp package-solution --ship"
}

Then run the gulp serve command. In the SPFx web part, you’ll see the environment variables we defined:

Method 4: Webpack DefinePlugin — Injecting Variables at Build Time

The Webpack DefinePlugin is the engine behind method 3. Sometimes it’s useful to understand it directly, especially for CI/CD pipelines where you want the pipeline itself to inject values.

Here’s a standalone example:

// gulpfile.js
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfig) => {
    const isDebugMode = generatedConfig.plugins
      .find(p => p instanceof webpack.DefinePlugin)
      ?.definitions?.DEBUG;

    generatedConfig.plugins.find(p => p instanceof webpack.DefinePlugin)
      .definitions['process.env.API_ENDPOINT'] = isDebugMode
        ? JSON.stringify('https://dev-api.contoso.com')
        : JSON.stringify(process.env.API_ENDPOINT);

    return generatedConfig;
  }
});

In this case, during gulp serve (debug mode), it uses the dev URL. During gulp bundle --ship (production), it reads from the OS environment variable API_ENDPOINT — which in a DevOps pipeline you’d set as a secret pipeline variable.

This is perfect for things like:

• Azure Application Insights instrumentation keys
• Backend API endpoints
• Feature flags

Method 5: SPFx 1.22+ with Heft (New Build System)

If you’re starting a fresh project with SPFx 1.22 or later, you’ll notice that gulp has been replaced by Heft as the default build system. Heft is a config-driven task orchestrator from Rush Stack that Microsoft now recommends for all new projects.

With Heft, you can’t use gulpfile.js the same way. Here are the main approaches.

The Recommended Approach: Webpack Patch Plugin

Microsoft’s official way to customize WebPack in Heft projects is through a webpack-patch.json config file.

Step 1: Create the JSON Configuration File

In your project’s config folder, create a new file named webpack-patch.json and add the following content:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/webpack-patch.schema.json",
  "patchFiles": ["./config/webpack-patch/env-inject.js"]
}

Step 2: Create the JavaScript Patch File

You need to create a new folder inside the config folder to hold your script.

• Create a folder named webpack-patch inside the config folder.
• Inside that new folder, create a file named env-inject.js and add this code:

const dotenv = require('dotenv');
const fs = require('fs');
const path = require('path');

// Resolve webpack from your project root — no rig path guessing needed
const webpackPath = require.resolve('webpack', { paths: [path.resolve(__dirname, '../../')] });
const webpack = require(webpackPath);

module.exports = function(webpackConfig) {
  const NODE_ENV = process.env.NODE_ENV || 'dev';
  const envPath = path.resolve(__dirname, `../../env/${NODE_ENV}.env`);

  if (!fs.existsSync(envPath)) {
    console.warn(`Warning: ${envPath} not found. Skipping env injection.`);
    return webpackConfig;
  }

  const envConfig = dotenv.parse(fs.readFileSync(envPath));
  const definitions = {};

  Object.entries(envConfig)
    .filter(([key]) => key.startsWith('SPFX_'))
    .forEach(([key, value]) => {
      definitions[`process.env.${key}`] = JSON.stringify(value);
    });

  webpackConfig.plugins.push(new webpack.DefinePlugin(definitions));
  return webpackConfig;
};

Step 3: Install Dependencies and Create Environment Files

Your patch file uses dotenv to parse environment files, so you need to install it.

• Open your terminal and run:

npm install dotenv --save-dev

• In the root of your project (the same level as src and config), create a folder named env.
• Inside the env folder, create a file named dev.env and define your variables. They must start with SPFX_:

SPFX_API_BASE_URL=https://my-dev-api.azurewebsites.net
SPFX_GREETING_MESSAGE=Hello from Dev Environment

Step 4: Add TypeScript Typings (Crucial for SPFx)
By default, TypeScript will throw an error if you try to type process.env.SPFX_API_BASE_URL because it doesn’t know what process.env is. You need to define these types so your SPFx web part compiles successfully.

• In your src folder, create a file named global.d.ts (or open it if it already exists).
• Add the following TypeScript declaration to let the compiler know about your custom variables:

declare interface NodeJS {
  env: {
    NODE_ENV: 'dev' | 'production';
    SPFX_API_BASE_URL: string;
    SPFX_GREETING_MESSAGE: string;
    [key: string]: string | undefined;
  };
}
declare var process: NodeJS;

Step 5: How to Test and Use It

Now you can safely use your environment variables anywhere inside your web part component (e.g., inside src/webparts/yourWebPart/components/YourWebPart.tsx).

• Open your main React component or web part TypeScript file.
• Add a simple HTML tags to render it on the screen:

public render(): React.ReactElement<IHeftProjectProps> {
    const {
      description,
      isDarkTheme,
      environmentMessage,
      hasTeamsContext,
      userDisplayName
    } = this.props;

    return (
      <section className={`${styles.heftProject} ${hasTeamsContext ? styles.teams : ''}`}>
        <div className={styles.welcome}>
          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
          <h2>Well done, {escape(userDisplayName)}!</h2>
          <div>{environmentMessage}</div>
          <div>Web part property value: <strong>{escape(description)}</strong></div>
        </div>
        
        {/* --- CUSTOM ENVIRONMENT VARIABLES BLOCK --- */}
        <div style={{ backgroundColor: '#f4f4f4', padding: '15px', marginTop: '20px', borderRadius: '4px' }}>
          <h3>Environment Variables Test</h3>
          <p><strong>Greeting:</strong> {process.env.SPFX_GREETING_MESSAGE}</p>
          <p><strong>API Base URL:</strong> {process.env.SPFX_API_BASE_URL}</p>
        </div>
        {/* ---------------------------------------- */}

      </section>
    );
  }

To test the dev.env variables, simply run your standard Heft command. Because the script defaults to dev, it will automatically pick up dev.env

heft start

Note: If you want to test a production environment (e.g., prod.env), you would run cross-env NODE_ENV=prod npm run build (assuming you have cross-env installed and configured in your package.json scripts)

Alternative: Pre-Build TypeScript Generation (Type-Safe)

If you want full TypeScript type safety and IDE autocomplete on your environment variables, this is the cleanest approach.

Create scripts/generate-env-config.js:

const fs = require('fs');
const dotenv = require('dotenv');

const NODE_ENV = process.env.NODE_ENV || 'dev';
const envConfig = dotenv.parse(fs.readFileSync(`./env/${NODE_ENV}.env`));

const spfxVars = Object.entries(envConfig)
  .filter(([key]) => key.startsWith('SPFX_'))
  .map(([key, value]) => `  ${key}: '${value}'`)
  .join(',\n');

const output = `// AUTO-GENERATED — Do not edit manually
export const ENV_CONFIG = {
${spfxVars}
} as const;
`;

fs.writeFileSync('src/utils/envConfig.generated.ts', output);
console.log('Environment config generated successfully.');

Update package.json scripts:

"scripts": {
  "generate-env": "node scripts/generate-env-config.js",
  "start:dev": "cross-env NODE_ENV=dev npm run generate-env && heft start",
  "start:prod": "cross-env NODE_ENV=prod npm run generate-env && heft start"
}

Use it in your components:

import { ENV_CONFIG } from '../utils/envConfig.generated';

// Full autocomplete and type checking!
const apiUrl = ENV_CONFIG.SPFX_API_BASE_URL;
const timeout = ENV_CONFIG.SPFX_API_TIMEOUT;

The generated file is committed to .gitignore and rebuilt every time you run the start script.

Choosing the Right Method

Here’s a quick summary of when to use what:

Common Mistakes to Avoid

• Committing .env files to Git. Always add .env, *.env, and env/ to .gitignore.
• Forgetting the SPFX_ prefix. Variables without this prefix often end up as undefined at runtime.
• Using require('webpack') in Heft projects. This causes silent build failures. Use the SPFx rig import instead.
• Not providing fallback values. Always use process.env.MY_VAR || 'fallback' so your build doesn’t break in environments where the variable isn’t set.
• Expecting runtime env access. Remember — DefinePlugin replaces values at build time, not runtime. The browser never sees process.env; it only sees the already-substituted string.

Conclusion

I hope you found this article helpful. In this guide, I explained different ways to use environment variables in SPFx. I covered built-in variables, PowerShell options, .env files, and Webpack methods. I also shared recommended approaches and alternatives for different scenarios.

If you are working on SPFx projects, choose the method that fits your setup and needs. Start with simple options and move to advanced ones as required. Using environment variables will make your solution more flexible and easier to manage.

Also, you may like:

• SharePoint Framework: CRUD Operations using ReactJS
• PnP React Pagination Control in SharePoint Framework (SPFx) Web Part
• SPFx Fluent UI React Control: ChoiceGroup and Checkbox
• Fluent UI React ComboBox Control in SPFx

In this tutorial, I’ll walk you through every method to set your work hours in Microsoft Teams – from updating your Outlook calendar settings to using the Shifts app and setting up quiet hours on mobile. Whether you’re a 9-to-5 person or someone working split shifts, there’s a setup here that works for you.

Why Work Hours Matter in Teams

Before jumping into the steps, let me quickly explain what “work hours” actually does in Teams.

When you set your work hours, a few things happen:

• Colleagues can see your availability when scheduling meetings — they’ll see the shaded “outside work hours” zone in the scheduling assistant
• Your status in Teams reflects when you’re active versus away
• Notifications can be automatically silenced outside your set hours
• Your work location (office or remote) can also be shared with your team

This is especially useful if you’re on a team spread across different time zones or if you have a non-standard schedule.

Set Microsoft Teams Work Hours

Let’s see how to set Microsoft Teams Work Hours.

Method 1: Set Work Hours Through Outlook (The Main Way)

Here’s the thing most people don’t realize — Microsoft Teams doesn’t have a standalone “set work hours” toggle buried inside its own settings. Your work hours are actually controlled in Outlook, and Teams pulls them from there. So this is where you need to start.

Using Outlook on the Web (Recommended)

This is the easiest method and works even if you don’t have Outlook desktop installed.

1. Go to outlook.office.com and log in with your work account
2. Click the Settings gear icon (top right corner)
3. In the Settings panel, click on Calendar
4. Click Work hours and location
5. You’ll see a list of days from Monday to Sunday — check the boxes for the days you work
6. For each day, use the dropdown menus to set your start time and end time
7. You can also set your work location here — choose “Office,” “Remote,” or “Unspecified” for each day
8. Hit Save

That’s it. Once saved, these hours will automatically appear in Teams. When anyone tries to schedule a meeting with you outside those hours, they’ll see a clear visual indicator that it falls outside your working time.

Using Outlook Desktop

If you’re using the classic Outlook desktop app:

1. Open Outlook
2. Click File in the top-left corner
3. Go to Options
4. Click on Calendar in the left sidebar
5. Under the Work time section, set your Start time and End time
6. Check or uncheck the days of the week you work
7. Click OK to save

One thing to keep in mind: the desktop Outlook method gives you a single, fixed schedule (the same hours every day). If you need different hours on different days (like a Tuesday/Thursday late start), the web version of Outlook gives you more flexibility.

Method 2: Set Work Hours Using the Shifts App in Teams (For Shift Workers)

If you work shift patterns, like rotating schedules, morning/afternoon shifts, or you’re a manager building a team schedule, the Shifts app in Teams is built exactly for this.

How to Access Shifts

1. In Teams, click on Apps in the left navigation bar (looks like a grid icon)
2. Search for Shifts and open it (or add it if you haven’t already)
3. If you’re a manager, you can create a new schedule or open an existing one
4. Click New shift to add a shift block — set the time range (e.g., 9:00 AM to 2:00 PM)
5. Assign it to yourself or a team member
6. Once the schedule looks right, click Publish to make it visible to your team

From an employee’s side, you can open Shifts to see your upcoming schedule, swap shifts, or request time off — all inside Teams.

The Shifts app is particularly useful in industries like retail, healthcare, or customer support, where schedules change weekly and team member overlap needs to be managed clearly.

Method 3: Set Quiet Hours on Teams Mobile

Work hours settings in Outlook control how you appear to others. But what if you want Teams to actually stop buzzing your phone after 6 PM? That’s where Quiet Hours comes in — and this one lives inside the Teams mobile app.

Setting Up Quiet Hours on Android or iOS

1. Open the Microsoft Teams app on your phone
2. Tap your profile picture or the menu icon (top-left corner)
3. Tap Notifications
4. Under Block notifications, tap Block during quiet hours
5. You’ll see two options:
   • Certain hours — toggle this on, then set a start and end time for daily silence (e.g., 6:00 PM to 8:00 AM)
   • All days — toggle specific days completely off (great for weekends)
6. Save your settings

Once this is set, Teams will not send you any push notifications during your quiet hours — no chat pings, no call alerts, nothing. You’ll still receive the messages, but they’ll wait silently until your next working window.

This is one of my favorite features for maintaining a healthy boundary between work and personal time, especially if your team is spread across time zones and messages come in at odd hours.

What Your Colleagues See When You Set Work Hours

Here’s a practical example that shows why this matters.

Imagine you work from 10:00 AM to 6:00 PM. A colleague wants to schedule a meeting at 8:00 AM. When they open the Scheduling Assistant in Outlook or Teams, they’ll see a shaded/blocked section on your calendar for 8:00 AM — a clear visual signal that it’s outside your work hours.

This saves a ton of back-and-forth. Your colleague will naturally shift the meeting to 10:00 AM or later without even asking you.

Also, when someone hovers over your profile in Teams, they can see your set work location for the day (office or remote). This small detail is surprisingly useful for hybrid teams trying to coordinate in-person days.

Updating Your Work Hours When Your Schedule Changes

Life changes, and so do schedules. Here’s a quick checklist for keeping things current:

• Changed your working days? Go back to Outlook Web > Settings > Calendar > Work hours and location, and update the day checkboxes
• Shifted to a new time zone? Update your time zone in Outlook Calendar settings — Teams will pick it up automatically
• Started working hybrid? Use the Work Plans feature in Teams to update your office/remote days each week
• Going on vacation? Set an Out of Office message in Outlook — this overrides your work hours and lets people know you’re away

A Few Tips to Get the Most Out of This

• Don’t set fake hours. If you realistically start at 9:30 AM, set 9:30. Setting 8:00 AM and never responding until 10:00 AM just frustrates people
• Sync with your manager. If your team uses Shifts, make sure your manager publishes your schedule so everyone’s on the same page
• Combine methods. Use Outlook for calendar-level work hours, and use Quiet Hours on mobile to actually mute your phone. These two together give you the best experience
• Check the scheduling assistant. Before sending a meeting invite to a colleague, use the Scheduling Assistant in Teams or Outlook to see their work hours — it saves everyone time

Conclusion

At the end of the day, setting your work hours in Microsoft Teams is a small step that makes a big difference. It helps you stay focused during work time and gives you the space to disconnect when the day is done. More importantly, it sets clear expectations for your team so everyone knows when you’re available and when you’re not.

Whether you use Outlook, the Shifts app, or quiet hours on mobile, the goal is the same — better balance and fewer interruptions. Take a few minutes to set it up properly, and your future self (and your teammates) will thank you for it.

Also, you may like:

• Zoom In on Microsoft Teams
• Archive Files in Microsoft Teams
• Enable GIFs in Microsoft Teams
• 6 Easiest Ways to Take a Screenshot in Microsoft Teams

That’s exactly where the DateAdd function comes in. It’s simple, flexible, and once you understand how it works, you’ll use it in almost every app you build.

In this guide, I’ll walk you through everything — the syntax, every supported unit, practical examples you can use right away, common mistakes to avoid, and how to combine DateAdd with other functions to solve real problems.

Power Apps DateAdd Function

DateAdd is a built-in Power Apps function that adds or subtracts a specific amount of time from a date or date-time value. You give it a starting date, a number, and a unit (like days, months, or hours), and it returns a new date shifted by that amount.

It’s like telling Power Apps: “Take this date, move it forward 30 days, and give me that new date.”

You’ll use it for things like:

• Auto-calculating due dates in forms
• Filtering galleries to show records from the last X days
• Setting expiry or renewal dates
• Converting UTC timestamps to local time
• Building date-based conditional logic

Power Apps DateAdd Syntax and Parameters

DateAdd( DateTime, Addition [, Units] )

Here’s what each parameter means:

• DateTime — Your starting date or date-time value. This can be Today(), Now(), a date picker value, a SharePoint date column, or a variable. This is required.
• Addition — How much to add. This is a number. Pass a positive number to go forward in time, a negative number to go backward. Required.
• Units — The unit of time you’re working with. This is optional. If you leave it out, Power Apps defaults to Days.

All TimeUnit Values You Can Use in Power Apps DateAdd()

Power Apps supports eight units in the DateAdd function. Here’s all of them:

A small but important note: when you use TimeUnit.Months or TimeUnit.Years, Power Apps handles the calendar math for you. So adding 1 month to January 31 gives you February 28 (or 29 in a leap year) — Power Apps won’t overflow into March.

How to Add Days to a Date in Power Apps

The most common use case in Power Apps is adding days. The syntax is straightforward:

DateAdd(Today(), 10, TimeUnit.Days)

You can also skip the unit entirely since Days is the default:

DateAdd(Today(), 10)

I’d still recommend explicitly including the unit. It makes your formula easier to read, especially when someone else (or future you) looks at it months later.

How to Add Months, Quarters, and Years Using Power Apps DateAdd()

Let’s see some examples:

Adding Months

DateAdd(Today(), 3, TimeUnit.Months)

This is perfect for quarterly billing cycles, trial period ends, or anything measured in months.

Adding Quarters

DateAdd(Today(), 2, TimeUnit.Quarters)

Two quarters = six months. You could achieve the same with 6, TimeUnit.Months, but Quarters is cleaner when your logic is explicitly quarter-based.

Adding Years

DateAdd(Today(), 1, TimeUnit.Years)

Useful for annual renewals, subscription expiry dates, or year-over-year comparisons.

Add Hours, Minutes, and Seconds Using Power Apps DateAdd()

When you’re working with time (not just dates), use Now() instead of Today() as your starting point. Now() returns the current date and time. Today() returns only the date at midnight.

Adding Hours

DateAdd(Now(), 4, TimeUnit.Hours)

Adding Minutes

DateAdd(Now(), 30, TimeUnit.Minutes)

Adding Seconds

DateAdd(Now(), 90, TimeUnit.Seconds)

Subtract Dates in Power Apps Using DateAdd

There’s no separate “DateSubtract” function in Power Apps. You subtract dates by simply passing a negative number as the Addition parameter.

Subtract Days

DateAdd(Today(), -7, TimeUnit.Days)

Subtract Months

DateAdd(Today(), -3, TimeUnit.Months)

Subtract Years

DateAdd(Today(), -2, TimeUnit.Years)

Subtract Hours from Now

DateAdd(Now(), -2, TimeUnit.Hours)

This pattern — using negative numbers to go back in time — is one of the most frequently used patterns in real apps, especially for filtering galleries to show recent records.

Power Apps DateAdd with Real-World Examples

Now let me show you the practical scenarios where you’ll actually use this in your apps.

Example 1: Auto-Fill a Due Date in a Power Apps Form

You have a form where users log tasks. You want the Due Date field to automatically default to 14 days from today, but users can still change it.

Set the DefaultDate property of your Date Picker control to:

DateAdd(Today(), 14, TimeUnit.Days)

That’s it. The field pre-fills 14 days out when the form opens, and the user can override it if needed.

Example 2: Power Apps Calculate a Contract or Subscription Expiry Date

A contract is signed on a specific date and lasts 1 year. Auto-calculate the expiry date from the signed date:

DateAdd(DatePicker_ContractStart.SelectedDate, 1, TimeUnit.Years)

You can display this in a label next to the form so users immediately see the expiry date as they fill in the start date.

Example 3: Filter a Power Apps Gallery to Show Last 30 Days

This is one of the most practical DateAdd formulas you’ll write. Say you have a SharePoint list and you want to show only records created in the last 30 days:

Filter(
    YourSharePointList,
    Created >= DateAdd(Today(), -30, TimeUnit.Days)
)

Replace YourSharePointList with your actual data source name and Created with your date column. For Dataverse, this works the same way.

Example 4: Show Records Due in the Next 7 Days in Power Apps

Want a “this week’s tasks” view in your Power Apps Data Table? Use DateAdd on both ends of a date range:

Filter(
    Tasks,
    DueDate >= Today() && DueDate <= DateAdd(Today(), 7, TimeUnit.Days)
)

This shows only items where the due date falls between today and 7 days from now.

Example 5: Build a Power Apps Date Range Picker with DateAdd

If you want to let users select a start date and automatically set the end date as 30 days later:

DateAdd(DatePicker_StartDate.SelectedDate, 30, TimeUnit.Days)

As the user picks a start date, the end date updates automatically.

Example 6: Highlight Overdue Items with Conditional Formatting in Power Apps

Use DateAdd with conditional formatting to turn overdue records red in a Power Apps Gallery. In the TemplateFill property of a label or container:

If(
   ThisItem.'Due Date' < Today(),
    RGBA(255, 0, 0, 0.1),
    RGBA(0, 0, 0, 0)
)

And if you want to highlight items due within the next 3 days in yellow:

If(
    DueDate < Today(),
    RGBA(255, 0, 0, 0.1),
    DueDate <= DateAdd(Today(), 3, TimeUnit.Days),
    RGBA(255, 255, 0, 0.2),
    RGBA(0, 0, 0, 0)
)

Example 7: Add Multiple Time Units — Nesting Power Apps DateAdd

DateAdd only accepts one unit per call. But what if you need to add both 2 months and 15 days? Just nest two DateAdd calls:

DateAdd(DateAdd(Today(), 2, TimeUnit.Months), 15, TimeUnit.Days)

The inner call adds 2 months first. Then the outer call adds 15 days to that result. Clean and readable.

Example 8: Convert UTC to Local Time Using DateAdd and TimeZoneOffset

SharePoint stores all date-time values in UTC. If your app displays a timestamp from a SharePoint list and it looks off by a few hours, this is why.

Here’s how to convert UTC to the user’s local time:

DateAdd(UTCDateTimeColumn, -TimeZoneOffset(), TimeUnit.Minutes)

TimeZoneOffset() returns the difference in minutes between UTC and the local time on the user’s device. The negative sign flips it from UTC to local.

And if you need to go the other way — convert local to UTC before saving to SharePoint:

DateAdd(Now(), TimeZoneOffset(), TimeUnit.Minutes)

This is one of the most practical (and most searched) Power Apps date questions, so it’s worth understanding well.

Example 9: Power Apps DateAdd with a Date Variable

You can use DateAdd on any date value, not just Today() or Now(). Here’s how to use it with a variable:

// First, set a date variable
Set(varProjectStart, DateValue("2026-01-15"));

// Then use DateAdd on that variable
DateAdd(varProjectStart, 90, TimeUnit.Days)
// Result: April 15, 2026

This is useful when you’re calculating dates based on values the user already entered earlier in the app.

Example 10: Use DateAdd with Power Apps Text() to Format the Output

DateAdd returns a date/time value. If you want to display it nicely in a label, wrap it in the Text() function:

Text(DateAdd(Today(), 30, TimeUnit.Days), "dd/mm/yyyy")

Or in a more readable format:

Text(DateAdd(Today(), 30, TimeUnit.Days), "mmmm dd, yyyy")

Power Apps DateAdd vs DateDiff — What’s the Difference?

People often confuse these two. Here’s the quick distinction:

• DateAdd — Takes a date and adds/subtracts time from it. Returns a new date.
• DateDiff — Takes two dates and measures the gap between them. Returns a number.

So:

• “What date is 30 days from today?” → Use DateAdd
• “How many days between date A and date B?” → Use DateDiff

Example of DateDiff for comparison:

DateDiff(Today(), DateValue("2026-12-31"), TimeUnit.Days)

You’ll often use them together. DateAdd to set a target date, DateDiff to calculate how far away it is.

Common Power Apps DateAdd Mistakes and How to Fix Them

1. Passing a text string instead of a date value

This will NOT work:

DateAdd("2026-03-22", 10, TimeUnit.Days) // Error!

You need to convert the string to a date first using DateValue():

DateAdd(DateValue("2026-03-22"), 10, TimeUnit.Days) // Works!

2. Forgetting that Today() returns midnight

Today() gives you the current date at 12:00 AM. If you’re working with time-sensitive logic and need the actual current time, use Now() instead.

3. Skipping the unit and getting unexpected results

If you’re adding months but forget the unit:

DateAdd(Today(), 3) // This adds 3 DAYS, not months

Always specify the unit to be safe and explicit.

4. Time zone issues with SharePoint data

If your filtered gallery is showing records off by a day, or timestamps look wrong, it’s almost always a UTC vs. local time issue. Use the TimeZoneOffset() conversion pattern I showed above.

5. Nesting more than two DateAdd calls

Nesting two DateAdd calls is fine. Beyond that, it gets hard to read and debug. Break it into variables instead:

Set(varStep1, DateAdd(Today(), 3, TimeUnit.Months));
Set(varStep2, DateAdd(varStep1, 15, TimeUnit.Days));
Set(varFinal, DateAdd(varStep2, 6, TimeUnit.Hours));

Much easier to follow.

Power Apps DateAdd Quick Reference Cheat Sheet

Bookmark this table for quick lookups:

Final Thoughts

I hope you found this article helpful. In this guide, I explained how to use the DateAdd function in Power Apps. I also shared simple examples to add or subtract dates. These examples make it easy to understand date calculations.

If you are building apps, you will use date logic often. DateAdd makes it easy to handle dates. Try the examples in your app and experiment with different values. With practice, it will become easy to use.

Also, you may like:

• Power Apps DateDiff() Function
• Update and UpdateIf in Power Apps
• Calculate Days Between Dates in Power Apps
• Show Repeating Table Data From SharePoint List in Power Apps

It was taking a long time, and even with careful work, small errors still occurred, such as incorrect amounts, missed dates, or incomplete entries. As volume increased, it became clear that this manual process was unsustainable.

That’s when I suggested building a simple automation using Power Automate and AI. Instead of handling invoices manually, we created a solution that lets users upload invoices as PDFs to a SharePoint library.

From there, the flow runs automatically, reads the invoice using AI, extracts all the important details, and stores them in a structured SharePoint list.

Extract Data from PDF Invoices Automatically Using Power Automate

What We Are Building

Here’s the full flow in simple terms:

1. User uploads an invoice PDF to the SharePoint Document Library
2. Power Automate triggers automatically
3. The file content is sent to AI
4. AI extracts structured invoice data
5. Data is stored in a SharePoint list

We are not using the default invoice model. Instead, we are using a custom AI prompt, which gives you more flexibility and control.

Create a SharePoint Document Library

Create a SharePoint document library where users will upload invoices.

Create a SharePoint List for Extracted Data

Create a SharePoint list to store all extracted data.

Add These Columns:

Note:

When I was building this solution, I didn’t just randomly add columns. I looked at the invoice format the client was using and then designed the SharePoint list based on that structure. The idea was simple whatever information exists in the invoice should have a proper place in SharePoint so that we don’t lose any important data.

You can follow the same approach. Your columns should always be based on your invoice format. If your invoices have different fields, you can adjust accordingly.

Create Extract Data from PDF Invoices Flow

Now that our SharePoint library and list are ready, let’s build the actual flow. This is where everything comes together.

The idea is simple: as soon as a file is uploaded, the flow should pick it up, read it using AI, extract the data, and store it in your SharePoint list.

Step 1: Create a New Flow

1. Go to Power Automate and create a new automated cloud flow.
2. Choose the trigger: When a file is created (properties only)
3. Then configure:
   • Site Address → Your SharePoint site
   • Library Name → Your Invoice Document Library

This ensures the flow runs automatically whenever a new invoice is uploaded.

Step 2: Get File Content

1. Add action: Get file content
2. Then configure:
   • Site Address → Your SharePoint site
   • File Identifier → Select Identifier from the trigger

This step is very important. The trigger only returns file metadata (like name and path), but the AI needs the actual file to read the invoice.

Step 3: Run a Custom AI Prompt

Now we move to the core logic.

1. Add action: Run a prompt

2. Expand the prompt and select + New custom prompt.

3. Then, under the instructions, add the following instruction:
4. Also, add an input parameter like: Document Content

You are an AI that extracts structured data from invoice documents.

Extract the following fields from the invoice:

- Invoice Number
- Invoice Date
- Due Date
- Vendor Name
- Vendor Address
- Customer Name
- Customer Address
- Subtotal
- Tax Amount
- Tax Percentage
- Total Amount
- Currency
- Bank Name
- Account Number
- IFSC Code
- UPI ID
- Line Items (Description, Quantity, Rate, Amount)
- Item Count (total number of line items)

Rules:
- Return ONLY valid JSON (no explanation).
- If any value is missing, return an empty string "".
- Dates should be in YYYY-MM-DD format.
- Numbers should not contain commas.

Output format:

{
  "InvoiceNumber": "",
  "InvoiceDate": "",
  "DueDate": "",
  "VendorName": "",
  "VendorAddress": "",
  "CustomerName": "",
  "CustomerAddress": "",
  "Subtotal": "",
  "TaxAmount": "",
  "TaxPercentage": "",
  "TotalAmount": "",
  "Currency": "",
  "BankName": "",
  "AccountNumber": "",
  "IFSCCode": "",
  "UPIID": "",
  "ItemCount": "",
  "LineItems": [
    {
      "Description": "",
      "Quantity": "",
      "Rate": "",
      "Amount": ""
    }
  ]
}

5. On the right side (Model response settings): Set Output type → JSON
6. Also, rename the prompt to something meaningful, like: Extract Invoice

Now that your prompt is configured, it’s time to test. Upload one of your sample invoice PDFs to the Document input. Check the Model response side, it is giving the correct json.

7. Then, in the Run a prompt action, select the prompt you created (for example, Extract Invoice).

After that, you need to pass the input file to the AI so it can read the invoice.

8. In the Document input, select:
   • File Content from the previous Get file content action

base64(body('Get_file_content'))

This step is very important. Without passing the file content, the prompt won’t have anything to process, and you won’t get any output.

Once this is set, the AI will take the PDF file, read the invoice details, and return the structured JSON based on your prompt.

Step 4: Create an Item in SharePoint

Now that our AI prompt is working and returning clean JSON, the next step is to store that data in our SharePoint list.

1. Add a new action: Create item
2. Then configure:
   • Site Address → Your SharePoint site
   • List Name → Extracted Invoice Data

Map the Fields

Now you need to map the output from the Run a prompt action to our SharePoint columns. Since your prompt is already returning structured JSON, you can directly use those values.

Map like this:

• Title → InvoiceNumber
• Invoice Date → InvoiceDate
• Due Date → DueDate
• Vendor Name → VendorName
• Vendor Address → VendorAddress
• Customer Name → CustomerName
• Customer Address → CustomerAddress
• Subtotal → Subtotal
• Tax Amount → TaxAmount
• Tax Percentage → TaxPercentage
• Total Amount → TotalAmount
• Currency → Currency
• Bank Name → BankName
• Account Number → AccountNumber
• IFSC Code → IFSCCode
• UPI ID → UPIID
• Item Count → ItemCount
• Line Items → LineItems

Handle Line Items

For the Line Items column (multiple lines), you need to convert the array into a string.

Use this expression:

string(body('Run_a_prompt')?['LineItems'])

This will store all the extracted line items in JSON format inside SharePoint.

Now map the additional tracking columns:

• File Name → File Name (from trigger)
• File Link → Link to item or file path
• Processed Date → use utcNow()
• Status → Processed

Testing the Complete Flow

Now that everything is set up, it’s time to test your flow end-to-end.

Upload one of your sample invoice PDF files to the SharePoint document library.

As soon as the file is uploaded, our flow should trigger automatically.

Verify the Flow Run

Go to Power Automate → Flow Runs and open the latest run.

Check each step one by one:

• Trigger → Confirm the file is picked correctly
• Get file content → Ensure file content is retrieved
• Run a prompt → This is the most important step

Open the output of Run a prompt and verify:

• JSON is valid
• All fields are present
• Values are correctly extracted

Check SharePoint List

Now go to your Extracted Invoice Data list.

You should see a new item created with:

• Invoice Number
• Vendor Name
• Dates
• Amounts
• Line Items
• File details

Everything should be populated automatically.

What If Something Is Not Working?

If data is incorrect or missing:

• Go back to the Run a prompt step
• Improve your prompt instructions
• Test again

Do not rush to change the flow logic. Most of the time, the issue is with how the prompt is written.

Conclusion

In this tutorial, I covered a complete end-to-end solution to automate invoice processing.

We started with a real problem where invoices were handled manually. Then we built a solution using Power Automate and AI.

I created a SharePoint document library to upload invoices and a SharePoint list to store extracted data. After that, we built the flow step by step, triggering when a file is uploaded, getting the file content, using a custom AI prompt to extract data, and finally storing that data in SharePoint.

We also tested the flow to make sure everything is working correctly.

That’s it. You now have a working solution that can automatically read invoice PDFs and store the data without any manual effort.

You may also like:

• Power Automate saves email attachment to SharePoint
• Delete all files in a SharePoint folder using Power Automate
• Send an Approval to a Microsoft 365 Group in Power Automate
• Send Approval to SharePoint Group Members Using Power Automate
• Copy List Items To Another List In SharePoint Using Power Automate

With SPFx v1.22, Microsoft replaced the Gulp-based toolchain with Heft — a config-driven build orchestrator from the Rush Stack ecosystem. Starting with SPFx v1.23, all new projects will use Heft by default. And by v1.24, the Gulp-based pipeline will be officially unsupported.

So if you have existing projects still running on Gulp, now is the time to migrate. In this tutorial, I will explain how to migrate from a Gulp-based to a Heft-based toolchain in the SharePoint Framework (SPFx) step by step.

What is Heft in SharePoint Framework?

In SPFx (SharePoint Framework), Heft is basically a build and task management tool that helps run and organize all the behind-the-scenes processes when you develop a SharePoint solution.

Think of Heft as a modern replacement for older tools like Gulp in SPFx. Starting from SPFx v1.22, Microsoft officially switched from Gulp to Heft to make builds cleaner and faster.

When you’re building an SPFx project, a lot of things need to happen automatically:

• Compile TypeScript → JavaScript
• Bundle your code
• Run linting (check code quality)
• Execute tests
• Build the final package ready for SharePoint

Heft handles all of this automatically — you just run one command like heft build or heft start, and it takes care of the rest behind the scenes.

Instead of writing custom task scripts like you used to with Gulp, Heft uses simple JSON configuration files to define what to do, making your project easier to maintain and understand.

A new SPFx project already comes pre-configured with Heft through something called a rig (a shared settings package). So you don’t need to set anything up yourself — it just works out of the box.

Here’s a quick comparison between Gulp and Heft.

Heft makes SPFx development cleaner and more modern by replacing the old Gulp-based system with a structured, configuration-driven approach.

Check out Set Up Your SharePoint Framework (SPFx) Development Environment using Heft Toolchain

Before You Start — A Few Things to Check

Don’t jump straight to uninstalling packages. Do these first:

• Back up your project. Either copy the folder or make sure all your code is committed to source control. The migration makes sweeping changes to your config files and package.json.
• Check your Node.js version. SPFx v1.22 requires Node v22. Run node -v to confirm. If you’re on an older version, update first.
• Check for gulp customizations. Open your gulpfile.js and look for any custom tasks — things like build.configureWebpack.mergeConfig(), build.rig.addPreBuildTask(), or custom copy/lint steps. You’ll need to translate these to Heft plugins after the migration. Note these down before you delete anything.

Migrate from Gulp based to Heft based Toolchain in SPFx

Follow the steps below to migrate from Gulp based to Heft based Toolchain in SharePoint Framework (SPFx).

Step 1: Uninstall the Gulp Toolchain

The first thing to do is rip out the old Gulp-based packages. Run this command from your project root:

npm uninstall @microsoft/sp-build-web ajv gulp

Next, uninstall the TypeScript compiler wrapper. The default SPFx v1.21.1 project uses TypeScript 5.3, so:

npm uninstall @microsoft/rush-stack-compiler-5.3

If your project uses a different TypeScript version, replace 5.3 with whatever version you have. Check your package.json devDependencies — look for @microsoft/rush-stack-compiler-*.

Step 2: Install the Heft Toolchain

Now install all the Heft-related packages your project needs:

npm install @microsoft/spfx-web-build-rig@1.22.1 @microsoft/spfx-heft-plugins@1.22.1 @microsoft/eslint-config-spfx@1.22.1 @microsoft/eslint-plugin-spfx@1.22.1 @microsoft/sp-module-interfaces@1.22.1 @rushstack/eslint-config@4.5.2 @rushstack/heft@1.1.2 @types/heft-jest@1.0.2 @typescript-eslint/parser@8.46.2 --save-dev --save-exact --force

That --force flag is there because some peer dependency conflicts can pop up during migration. It’s fine to use here — you’re intentionally replacing the old toolchain.

If you also want to upgrade TypeScript to v5.8 (optional but recommended), run:

npm install typescript@~5.8.0 --save-dev

Heads up: If you run into issues installing TypeScript v5.8 during migration, you can skip this for now. The toolchain works fine with TypeScript v5.3 too.

Step 3: Update Your NPM Scripts

Open your package.json and replace the old Gulp-based scripts with Heft equivalents. Find the scripts section and update it like this:

{
  "scripts": {
    "build": "heft build --clean",
    "clean": "heft clean",
    "test": "heft test",
    "test-only": "heft run --only test --",
    "deploy": "heft dev-deploy",
    "start": "heft start --clean",
    "build-watch": "heft build --lite",
    "package-solution": "heft package-solution",
    "deploy-azure-storage": "heft deploy-azure-storage",
    "eject-webpack": "heft eject-webpack",
    "trust-dev-cert": "heft trust-dev-cert",
    "untrust-dev-cert": "heft untrust-dev-cert"
  }
}

Here’s how the old Gulp commands map to Heft:

Read How to Change Solution Name in SPFx

Step 4: Add the SPFx Heft Rig

Heft uses a concept called rigs — shared build configurations that multiple projects can extend. This is what replaces the old sp-build-web rig from the Gulp days.

Create a new file at ./config/rig.json with this content:

{
  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
  "rigPackageName": "@microsoft/spfx-web-build-rig"
}

This one file tells Heft: “use the SPFx web build rig for all the default build settings.” You don’t have to define TypeScript paths, Webpack entry points, or ESLint configs from scratch — the rig handles all of that for you.

Step 5: Replace the Sass Configuration

Open ./config/sass.json and replace everything in it with:

{
  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json",
  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json"
}

This hooks your project’s Sass compilation into the Heft Sass plugin defined by the rig. If you had custom Sass settings in the old file (like useCSSModules or postProcessedFileExtensions), you can add those back here — they’ll override the rig’s defaults.

Step 6: Add the TypeScript Plugin Configuration

Create a new file at ./config/typescript.json:

{
  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json",
  "staticAssetsToCopy": {
    "fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"],
    "includeGlobs": ["webparts/*/loc/*.js"]
  }
}

The staticAssetsToCopy section tells Heft which non-TypeScript files to copy over during the build. This replaces what gulp copy-assets or similar custom tasks used to handle. Adjust the file extensions and globs to match whatever your project actually needs.

Check out How to Install NVM in Windows

Step 7: Update tsconfig.json

Replace the contents of your existing ./tsconfig.json with this:

{
  "extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json"
}

Your old tsconfig.json probably had a long list of compiler options. All of those are now inherited from the rig’s base config. You only need to add project-specific overrides here if you have them.

Step 8: Delete gulpfile.js

Just delete it.

rm gulpfile.js

If you had custom tasks in your gulpfile.js — like custom Webpack config, pre-build steps, or post-build file operations — don’t delete it yet. Keep it open in a separate window for reference while you set up the equivalent Heft plugins in the next section.

Step 9: Upgrade Your SPFx Production Dependencies

Update the core SPFx packages to v1.22:

npm install @microsoft/sp-component-base@1.22.1 @microsoft/sp-core-library@1.22.1 @microsoft/sp-lodash-subset@1.22.1 @microsoft/sp-office-ui-fabric-core@1.22.1 @microsoft/sp-property-pane@1.22.1 @microsoft/sp-webpart-base@1.22.1 --save-exact

After making so many changes to packages, I’d strongly recommend doing a full clean reinstall:

# Windows (PowerShell)
Remove-Item -Recurse -Force node_modules
Remove-Item -Force package-lock.json

# Mac/Linux
rm -rf node_modules package-lock.json

# Then reinstall everything cleanly
npm install

This ensures your dependency tree is consistent and you’re not carrying over any stale Gulp-related packages.

Step 10: Test the Migration

Run a build to verify everything works:

npm run build

Or if you have Heft installed globally:

heft build --production

If the build completes without errors, you’re done with the core migration. Fire up the dev server with:

npm run start
# or
heft start --clean

This will automatically open the workbench url. In case you are getting an error like in the image below.

Just run the following command.

npm run trust-dev-cert

Then, re-run the npm run start command; this time, without errors, you can get your web part as shown below.

Handling Custom gulpfile.js Tasks

This is where it gets more involved. If your old gulpfile.js was just the default SPFx boilerplate, you’re done. But if you had custom tasks, here’s how to handle the most common ones:

Custom Webpack Configuration

If you were using build.configureWebpack.mergeConfig() to inject custom Webpack settings, you have two options in Heft:

Option 1 — Use the webpack patch file (simpler):

Create a file at ./config/webpack.extend.js:

module.exports = function (existingConfig) {
  existingConfig.resolve = existingConfig.resolve || {};
  existingConfig.resolve.alias = {
    ...existingConfig.resolve.alias,
    '@myAlias': require('path').resolve(__dirname, '../src/helpers')
  };
  return existingConfig;
};

Then reference it in your heft.json (more on that file below).

Option 2 — Eject Webpack entirely (for complex cases):

heft eject-webpack

This generates a full webpack.config.js in your project that you can modify directly. It’s the escape hatch for when you need complete control.

Custom Pre/Post Build Tasks

If you had build.rig.addPreBuildTask() or addPostBuildTask() For things like copying extra files or running scripts, use Heft’s run-script-plugin.

Create ./config/heft.json:

{
  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft.schema.json",
  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/heft.json",
  "phasesByName": {
    "build": {
      "tasksByName": {
        "my-custom-script": {
          "taskPlugin": {
            "pluginPackage": "@rushstack/heft",
            "pluginName": "run-script-plugin",
            "options": {
              "scriptPath": "./scripts/my-custom-task.js"
            }
          }
        }
      }
    }
  }
}

Create ./scripts/my-custom-task.js and put your custom logic there. This script runs as part of the build phase.

Copying Files

The old build.copyStaticAssets type of operations now live in typescript.json under staticAssetsToCopy (which we already configured in Step 6). For more complex copy scenarios, use the copy-files-plugin in heft.json.

Common Issues and Fixes

A few things that tend to trip people up during migration:

• ESLint errors after migration: Your old .eslintrc.js may reference @microsoft/eslint-config-spfx in a way that conflicts with the new package. Update the extends in your ESLint config to use @rushstack/eslint-config and re-run the build.
• “Cannot find module” errors: Usually means stale node_modules. Do the clean reinstall from Step 9.
• TypeScript errors you didn’t have before: If you upgraded to TypeScript v5.8, some stricter type checks may now flag issues that were silently ignored before. Fix them or stay on TypeScript v5.3 for now.
• PnP SPFx Controls not working: If you use @pnp/spfx-controls-react, make sure you’re on a version that supports SPFx v1.22. Run npm ls @pnp/spfx-controls-react to check your current version and compare with their release notes.
• Dev cert issues: If HTTPS fails on the local workbench, run heft trust-dev-cert to re-trust the certificate.

Using the M365 CLI to Generate an Upgrade Report (Optional but Helpful)

If you want a full list of every change needed for your specific project before you manually edit anything, the Microsoft 365 CLI can generate an upgrade report for you:

# Install M365 CLI if you don't have it
npm i -g @pnp/cli-microsoft365

# Generate the upgrade report
m365 spfx project upgrade --toVersion 1.22.0 --preview --output md > upgrade-report.md

Open upgrade-report.md — it will list every dependency that needs to change, every script to update, and any manual steps specific to your project. It’s a great way to audit before you start making changes.

What the Final Project Structure Looks Like

After migration, here’s what your key config files should look like:

your-spfx-project/
├── config/
│   ├── rig.json          ← NEW (points to spfx-web-build-rig)
│   ├── heft.json         ← NEW (only if you have custom tasks)
│   ├── sass.json         ← UPDATED (now extends rig)
│   ├── typescript.json   ← NEW (configures TS plugin)
│   └── package-solution.json (unchanged)
├── tsconfig.json         ← UPDATED (now extends rig's base config)
├── package.json          ← UPDATED (scripts use heft commands)
├── gulpfile.js           ← DELETED
└── src/                  (unchanged)

Wrapping Up

In this tutorial, I explained how to migrate from Gulp based toolchain to Heft based toolchain in the SharePoint Framework (SPFx). Follow the above steps, and you should be able to migrate your project.

The key things to remember:

• Uninstall the old Gulp packages and install the Heft equivalents
• Add rig.json to point to @microsoft/spfx-web-build-rig
• Update your config files (sass.json, typescript.json, tsconfig.json)
• Replace your npm scripts with heft commands
• Delete gulpfile.js (but migrate any custom tasks first)
• Do a clean npm install at the end to flush out any stale dependencies

If you’ve got custom Gulp tasks, the translation to Heft plugins takes a bit of extra thought — but the run-script-plugin and copy-files-plugin cover most real-world scenarios.

Also, you may like:

• Create a Modal Popup in SPFx
• Bind SharePoint List Items to SPFx Fluent UI React Dropdown
• Customize SharePoint List Command Bar Download Button Using SPFx Extension
• Upload File to SharePoint Document Library With Metadata in SPFx

In this Power Apps tutorial, I’ll walk you through everything – from the basic syntax to real-world use cases where the Power Apps Weekday function actually works.

What Does The Power Apps Weekday Function Do?

Simply put, the Power Apps Weekday() takes a date and returns a number representing the day of the week. By default, 1 = Sunday and 7 = Saturday.

That’s it. It returns a number. But what you do with that number is where the logic starts.

Syntax

Weekday( DateTime [, WeekdayFirst] )

• DateTime — Required. This is the date you want to evaluate. Can be Today(), Now(), a date from a DatePicker, or any Date/Time value.
• WeekdayFirst — Optional. This tells Power Apps which day of the week your week starts on. If you leave it out, Sunday is treated as day 1.

Power Apps Weekday Function

This optional second parameter is what trips most people up. Power Apps gives you two ways to set it:

Option 1: Use The StartOfWeek Enumeration (Recommended)

This is the cleaner, more readable approach.

Option 2: Use Excel-style Numeric Codes

If you’re coming from an Excel background, you can pass in a number instead:

I personally prefer the StartOfWeek enumeration — it’s easier to read in a formula six months later.

Power Apps Weekday Function Examples

Let’s say today is Thursday, April 9, 2015 (a date from Microsoft’s own docs, just so we have something concrete).

Weekday( Now() )
// Returns: 5
// Because Thursday is the 5th day when Sunday = 1

Weekday( Now(), StartOfWeek.Monday )
// Returns: 4
// Because Thursday is the 4th day when Monday = 1

Weekday( Now(), StartOfWeek.Wednesday )
// Returns: 2
// Because Thursday is the 2nd day when Wednesday = 1

Weekday( Now(), 14 )
// Returns: 1
// Using Excel code 14 (Thursday as start), Thursday itself = 1

These are simple checks. Now let’s get into the stuff you’ll actually build with.

Example 1: Show The Day Name From a Date in Power Apps

The Power Apps Weekday() function returns a number, not the day name. But you can convert it using a Switch statement. Put this in a Label’s Text property:

Switch(
    Weekday(DatePicker1.SelectedDate, StartOfWeek.Sunday),
    1, "Sunday",
    2, "Monday",
    3, "Tuesday",
    4, "Wednesday",
    5, "Thursday",
    6, "Friday",
    7, "Saturday"
)

This displays the full day name for whatever date the user picks. Clean and easy to read.

If you just want a short version like “Mon” or “Thu”, you can also use the Text() function with a format string:

Text(DatePicker1.SelectedDate, "ddd")   // "Thu"
Text(DatePicker1.SelectedDate, "dddd")  // "Thursday"

Both work. I tend to use Text() when all I need is the name, and Weekday() + Switch() when I need to make logical decisions based on the day.

Example 2: Check If a Date Falls On a Weekend In Power Apps

This is probably the most common use of Weekday() in real Power Apps apps. Say you want to warn a user if they’ve picked a Saturday or Sunday:

If(
    Weekday(DatePicker1.SelectedDate) = 1 || 
    Weekday(DatePicker1.SelectedDate) = 7,
    "Weekend — please pick a working day",
    "Good to go!"
)

Here, 1 = Sunday and 7 = Saturday (default Sunday-first week).

You can also hide or disable a button based on this logic. Put this in a button’s DisplayMode property:

If(
    Weekday(DatePicker1.SelectedDate) = 1 || 
    Weekday(DatePicker1.SelectedDate) = 7,
    DisplayMode.Disabled,
    DisplayMode.Edit
)

That way, users literally can’t submit on a weekend. Super useful for leave request forms or booking apps.

Example 3: Highlight Weekends in a Power Apps Calendar

If you’re building a custom calendar gallery in Power Apps, you can use Weekday() to change the background color of weekend cells. Put this in the Fill property of your gallery item:

If(
    Weekday(ThisItem.Date, StartOfWeek.Monday) >= 6,
    RGBA(255, 230, 230, 1),  // Light red for weekends
    RGBA(255, 255, 255, 1)   // White for weekdays
)

With StartOfWeek.Monday, day 6 = Saturday and day 7 = Sunday — so >= 6 catches both.

Example 4: Find the Monday Of The Current Week in Power Apps

This is a classic need for Power Apps timesheet apps or weekly reports. You want to jump back to the Monday of whatever week the user is in.

DateAdd(
    Today(),
    -(Weekday(Today(), StartOfWeek.MondayZero)),
    TimeUnit.Days
)

StartOfWeek.MondayZero returns 0 for Monday, 1 for Tuesday, and so on up to 6 for Sunday. So subtracting that number from today always lands you on the Monday of the current week.

And once you have Monday, you can get the rest of the week easily:

// Tuesday
DateAdd(Today(), -(Weekday(Today(), StartOfWeek.MondayZero)) + 1, TimeUnit.Days)

// Wednesday
DateAdd(Today(), -(Weekday(Today(), StartOfWeek.MondayZero)) + 2, TimeUnit.Days)

// Thursday
DateAdd(Today(), -(Weekday(Today(), StartOfWeek.MondayZero)) + 3, TimeUnit.Days)

// Friday
DateAdd(Today(), -(Weekday(Today(), StartOfWeek.MondayZero)) + 4, TimeUnit.Days)

This is exactly what you’d use to auto-fill date boxes in a weekly timesheet form.

Example 5: Filter Out Weekends From a Power Apps Date Collection

Sometimes you need to build a Power Apps Collection of only working days—for example, to populate a dropdown with the next 30 business days. Here’s how to do that using Weekday() inside a ForAll() + If() combo:

ClearCollect(
    colBusinessDays,
    ForAll(
        Sequence(30, 1, 1),
        If(
            !(Weekday(DateAdd(Today(), Value)) = 1 ||
              Weekday(DateAdd(Today(), Value)) = 7),
            {
                RowID: Value,
                Date: DateAdd(Today(), Value)
            }
        )
    )
)

This loops through the next 30 days, checks each one, and only adds it to the collection if it’s NOT a Sunday (1) or Saturday (7). You’d fire this in the OnStart of your app or when the screen loads.

Once you have colBusinessDays, you can use it as the Items source in a dropdown or combo box — so users can only ever pick a working day.

Example 6: Calculate the Next Business Day In Power Apps

Need to auto-suggest the next available working day? This is useful for delivery date pickers or SLA calculators:

// Find next business day from today
If(
    Weekday(Today()) = 6,  // Friday
    DateAdd(Today(), 3),   // Skip to Monday
    If(
        Weekday(Today()) = 7,  // Saturday
        DateAdd(Today(), 2),   // Skip to Monday
        DateAdd(Today(), 1)    // Just add one day
    )
)

This handles Friday and Saturday edge cases, both skip forward to the next Monday. Any other day just adds one day.

Example 7: Count Business Days Between Two Dates in Power Apps

This one is a bit more involved but really useful. You can’t just subtract two dates and call it business days — you need to exclude weekends. Here’s how to do it:

CountIf(
    ForAll(
        Sequence(DateDiff(StartDate, EndDate, TimeUnit.Days), 0),
        {
            DayNum: Weekday(DateAdd(StartDate, Value, TimeUnit.Days))
        }
    ),
    DayNum <> 1 && DayNum <> 7
)

Replace StartDate and EndDate with your actual date values or DatePicker references. This creates a sequence of all days between the two dates, checks each one’s weekday number, and counts only those that aren’t Sunday or Saturday.

Power Apps Weekday() vs. Text() — Which Should You Use?

I get this question a lot. Here’s a quick way to think about it:

• Use Weekday() When you need to make a decision based on the day, such as checking whether it’s a weekend, filtering a collection, or calculating offsets.
• Use Text() when you just want to display the name of the day — like Text(Today(), "dddd") showing “Monday”.

They solve different problems. In many real apps, you’ll end up using both.

Common Mistakes to Avoid

• Forgetting the default is Sunday = 1. If your app is for a Monday-to-Friday workforce, always pass StartOfWeek.Monday to avoid off-by-one errors.
• Using the wrong Excel code. The numeric codes can be confusing. Stick to StartOfWeek enumerations — they’re self-documenting.
• Using Weekday() directly in a dropdown Items property. It returns a number, not a list. Wrap your logic in a ForAll() or Switch() first.
• Not handling the Friday/Sunday edge case when calculating the next business day. Always think about what happens on weekends.

Power Apps Weekday() & Text() Formulas Explanation

In the table below, I added a few Power Apps Weekday() and Text() formulas and their outputs. Have a look at it.

Conclusion

I hope you found this article helpful. In this guide, I explained how the Weekday function works in Power Apps. I also showed how to use the StartOfWeek option and different examples. These examples help you easily understand how to work with dates.

If you are building apps with date logic, this function will be very useful. You can use it for calendars, business day checks, and more. Try combining it with Switch, ForAll, and DateAdd for better results. With practice, working with dates will become simple.

Also, you may like:

• Power Apps Refresh Function – With Examples
• Create Tabs in Power Apps [Using Modern Tab List]
• 2 Best Ways to Create a Folder in SharePoint From Power Apps
• Get Current Screen Name in Power Apps

With SPFx 1.22, things have changed. Microsoft has introduced a new build system called Heft, which replaces Gulp and handles the build process more structurally.

I’m going to walk you through every step — explain what each tool actually does, why you’re installing it, and flag the important gotchas along the way. By the end, your machine will be fully ready to build real SharePoint solutions.

This tutorial walks you through setting up your SPFx development environment using the Heft toolchain step by step. After this, i

This Guide Is for SPFx v1.22 and Above (Heft-Based Toolchain)

Here’s something you absolutely need to know before anything else: SPFx v1.22 introduced a brand-new toolchain called Heft, replacing the older Gulp-based build system that was used from SPFx v1.0 all the way through v1.21.1.

This matters because:

• If you’re building on SPFx v1.22 or newer → you’re on the Heft-based toolchain. This guide is for you.
• If you’re building on SPFx v1.0 through v1.21.1, including any on-premises SharePoint Server deployment → you’re on the Gulp-based (legacy) toolchain. Then check this: Set up your SharePoint Framework Gulp-based development environment.

Not sure which version you need? If you’re building for SharePoint Online with no constraints, just follow this guide — it uses the latest SPFx. If you need to support a specific version of SharePoint Server on-premises, check the version number requirements first before installing anything.

The toolchain change is significant. Build configurations, commands, and customizations all changed between these two toolchains. The command you’ll use to run your project locally, for example, is heft in the new toolchain — not gulp serve. I’ll cover all of that clearly as we go.

Let’s first understand what Heft is in SPFx.

What is Heft in SharePoint Framework (SPFx) and Why Do We Need This?

In SharePoint Framework (SPFx), Heft is the modern tool that handles everything required to build and package your solution. Earlier, SPFx relied on Gulp, which required developers to manage multiple tasks and configurations manually.

Heft simplifies this by providing a standardized and optimized way to run all build-related activities with minimal setup. For a beginner, you can think of Heft as the system that quietly takes your code, processes it, and prepares it so SharePoint can use it.

When you work on an SPFx project, you typically write code in TypeScript and use modern libraries like React. However, SharePoint cannot directly use that raw code. This is where Heft comes in. It compiles your code, bundles all the files together, checks for errors, and prepares the final package that can be deployed. All of this happens behind the scenes when you run simple commands in your terminal.

Heft provides a set of commands that you’ll use regularly during development. The most common one is:

• heft build → Compiles your project and prepares the build output.

If you want to remove old build files and start fresh, you can use:

• heft clean → Deletes previously generated files and clears the build cache.

For local development, especially when testing your web part in the browser, you’ll use:

• heft start → Starts the local development environment and serves your solution.

Once your solution is ready, you need to package it so it can be deployed to SharePoint. For that, Heft provides:

• heft package-solution → Creates the .sppkg file used for deployment.

If you’re preparing your solution for production, you should use:

• heft package-solution --production → Generates an optimized, production-ready package.

During development, especially when testing locally over HTTPS, you might need:

• heft trust-dev-cert → Installs and trusts a development certificate for secure local testing.

In simple terms, Heft is what keeps your SPFx development smooth and consistent. Instead of worrying about how your code is compiled or packaged, you just run these commands, and Heft takes care of the rest. As you grow more comfortable with SPFx, you might explore customizing Heft, but for most developers—especially beginners—it works perfectly out of the box.

Check out How to Change Solution Name in SPFx

Set Up Your Microsoft 365 Tenant First

SPFx solutions run in SharePoint Online, so you need somewhere to test them. Before following the installation steps below, make sure you have a Microsoft 365 tenant ready. If you don’t have one, go to developer.microsoft.com and sign up for the free Microsoft 365 Developer Program — it gives you a sandbox tenant you can use freely for development.

You Can Use Any Operating System

One of the great things about SPFx is that you are not locked into Windows. You can use macOS, Windows, or Linux — all are fully supported.

Step 1: Install Node.js v22 LTS

The first thing to install is Node.js. Think of Node.js as the engine that powers all the SPFx developer tools. Without it, nothing else will work.

The version you need is Node.js v22 LTS (also known by its codename “Jod”).

This is the recommended version for SPFx v1.22.*. If you’re working on a project using a different SPFx version, verify that your Node.js version is supported for that particular SPFx release before installing.

LTS vs. Current — What You Need to Know

Node.js always maintains two release tracks simultaneously:

• LTS (Long Term Support): Stable, thoroughly tested, and the version that SPFx officially supports.
• Current: Has newer features but is not supported by SPFx. Avoid it for SPFx development.

Always install an LTS version. SPFx is only supported on LTS versions of Node.js, so do not install the “Current” release even if it looks newer on the Node.js website.

How to Download Node.js

Here’s how to find the right installer:

• Go to the Node.js website (nodejs.org) and navigate to the Downloads page to find a specific version.
• Windows users: Look for the .msi installer files. There are usually two — one for x86 and one for x64 systems. The filenames look like node-v{version-number}-x86.msi or node-v{version-number}-x64.msi. Most modern Windows machines are 64-bit, so you’ll want the x64 version.
• macOS users: Look for the .pkg installer, usually named node-v{version-number}.pkg.

Verify Your Installation

After installing Node.js, open your terminal (Command Prompt or PowerShell on Windows, Terminal on macOS/Linux) and run:

node --version

You should see a version number like v22.x.x. If that appears, Node.js is successfully installed, and you’re ready to move on.

Already have Node.js installed? Run node --version first. If you have v22 LTS already, you’re good to go. If you have a different version and need to work with multiple SPFx versions across different projects, consider using Node Version Manager (NVM) — more on that later.

Read How to Create a Modal Popup in SPFx

Step 2: Install a Code Editor

Next, you need a code editor to write your TypeScript and configuration files. You can use any editor you’re comfortable with — SPFx has no requirement here.

That said, I recommended using Visual Studio Code (VS Code) for all its examples, and I’d strongly recommend it for beginners and experienced developers alike. It’s free, cross-platform, has a built-in terminal (which is super handy for running SPFx commands without switching windows), and has excellent extension support.

If you prefer WebStorm from JetBrains, that’s also a perfectly valid choice.

Download VS Code from code.visualstudio.com and install it for your platform.

Step 3: Install the Development Toolchain Prerequisites

This is the most important step of the entire setup. SPFx’s build and development toolchain relies on several open-source tools. While most project-level dependencies install automatically when you create a new project, there are three tools you need to install globally on your machine:

1. Heft — the build tool (new in SPFx v1.22)
2. Yeoman (yo) — the project scaffolding wizard
3. Yeoman SharePoint Generator — the SPFx-specific plugin for Yeoman

Microsoft gives you a helpful shortcut — you can install all three with a single command:

npm install @rushstack/heft yo @microsoft/generator-sharepoint --global

Or, if you prefer to install them one at a time and understand what each does, here’s the breakdown:

Install Heft

Heft is the new build toolchain introduced with SPFx v1.22. It replaces Gulp as the primary build engine and orchestrates other popular tools like TypeScript, ESLint, Jest, Webpack, and API Extractor under the hood. If you’re familiar with task runners like Gulp or Grunt, Heft plays a very similar role — but it’s designed for large-scale, consistent use across many projects.

To install Heft globally:

npm install @rushstack/heft --global

Why install it globally? Technically, Heft doesn’t need to be installed globally — it’s included inside each project you create. But installing it globally makes it much easier to run Heft commands directly from your terminal without navigating into each project’s local binaries. The Microsoft documentation recommends global installation for this reason.

Important — What if you’re on SPFx v1.21.x or older? You should not install Heft. Older projects use the Gulp-based toolchain, and their setup guide tells you to install gulp-cli globally instead. The tools are different, the commands are different, and mixing them up will cause confusion.

Install Yeoman

Yeoman (yo) is a project scaffolding tool. It asks you a series of questions in an interactive wizard and then automatically generates a complete, correctly structured SPFx project for you — with all the right folders, TypeScript configuration, build settings, and boilerplate code already in place.

To install Yeoman globally:

npm install yo --global

Install the Yeoman SharePoint Generator

The Yeoman SharePoint Generator is the SPFx-specific plugin that powers the wizard when you create a new project. Without it, Yeoman wouldn’t know how to scaffold an SPFx solution. It’s what makes Yeoman ask you things like “What type of component do you want to create?” and “Which JavaScript framework do you want to use?”

To install it globally:

npm install @microsoft/generator-sharepoint --global

Check out Bind SharePoint List Items to SPFx Fluent UI React Dropdown

Step 4: Install a Modern Web Browser

You’ll need a modern web browser for testing and debugging your solutions in the SharePoint workbench. The Microsoft documentation recommends any of the following:

• Microsoft Edge
• Google Chrome
• Firefox

All three are excellent choices with strong developer tools. Avoid Internet Explorer — it’s not supported for SPFx development.

Step 5: Trust the Self-Signed Developer Certificate

When you test an SPFx solution locally, it runs on a local development server that uses HTTPS by default. This local server uses a self-signed SSL certificate — a certificate that isn’t issued by a trusted certificate authority. By default, your operating system and browser will not trust this certificate, which means you’ll get a security warning or blocked page when you try to load the workbench.

To fix this, you need to register the certificate as trusted on your machine. SPFx includes a built-in Heft command to do this.

When to Run This Command

You can run this command either now or after you create your first project. I recommend running this command after you create your first project. The command needs to be run from inside an SPFx project folder (after running npm install to install the project dependencies), so if you haven’t created a project yet, you can come back to this step.

Once you have a project created and npm install has been run inside the project root, execute:

heft trust-dev-cert

Note for SPFx v1.21.x and older (Gulp-based projects): The equivalent command in the old toolchain was gulp trust-dev-cert. If you’re working on a legacy project, use the Gulp command instead.

You only need to do this once per machine. After the certificate is trusted, all future SPFx projects on the same machine will work without needing to repeat this step.

Check out Customize SharePoint List Command Bar Download Button Using SPFx Extension

Step 6: Set the SPFX_SERVE_TENANT_DOMAIN Environment Variable (Optional but Recommended)

Starting with SPFx v1.17, the hosted workbench URL used during development was changed to use a dynamic placeholder. If you open a project’s ./config/serve.json file, you’ll see this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}

Notice the {tenantDomain} placeholder. When you run the serve command to test your solution, SPFx automatically replaces this placeholder with the value of an environment variable called SPFX_SERVE_TENANT_DOMAIN on your system.

This is useful because it means you configure your SharePoint tenant domain once at the operating system level, and every SPFx project you create picks it up automatically. You won’t need to manually edit the serve.json file in every project.

The variable supports not just the tenant domain but also full site URLs in other serve configurations — for example, if you’re building a Field Customizer and have a pageUrl in your serve config with a {tenantDomain} placeholder, it will be replaced the same way.

How to Set It

On Windows:

1. Press Win + S and search for “Environment Variables”
2. Click “Edit the system environment variables”
3. Under “User variables”, click “New”
4. Set the Variable name to SPFX_SERVE_TENANT_DOMAIN
5. Set the Variable value to your SharePoint tenant domain, e.g., contoso.sharepoint.com
6. Click OK and restart your terminal

On macOS/Linux:
Add the following line to your shell profile file (~/.zshrc for Zsh, ~/.bashrc for Bash):

export SPFX_SERVE_TENANT_DOMAIN=contoso.sharepoint.com

Then restart your terminal or run source ~/.zshrc to apply the change immediately.

Read Upload File to SharePoint Document Library With Metadata in SPFx

Quick Verification: Are All Your Tools Installed?

Once you’ve completed the steps above, you can verify everything is in place by running this command in your terminal:

npm list --global --depth=0

This lists all globally installed npm packages. You should see:

• @rushstack/heft
• yo
• @microsoft/generator-sharepoint

If any of these are missing, re-run the install command for that specific package.

Develop Your First Client-Side Web Part using SPFx

With all the tools installed and your developer certificate trusted, your machine is completely set up for SharePoint Framework development. The next step is scaffolding your very first SPFx project. Now we will create our first SPFx client-side web part.

You can also create a folder:

md SPFxHeftProject
cd SPFxHeftProject

Open your terminal, navigate to the folder where you’d like to create the project, and run:

yo @microsoft/sharepoint

Yeoman will launch an interactive wizard. It will ask you for your solution name, the type of component you want to create (web part, extension, etc.), and your preferred JavaScript framework.

When prompted:

• What is your solution name? sp-fx-heft-project
• Which type of client-side component to create? WebPart
• Add new Web part to solution sp-fx-heft-project.
• What is your Web part name? HeftProject
• Which template would you like to use? React

Here is a screenshot for your reference.

Understand What Just Changed

When the generator runs, it defaults to the Heft-based toolchain. You’ll notice immediately that the generated project looks slightly different from older projects:

• There’s no gulpfile.js
• There’s a ./config/rig.json file
• There’s a ./config/sass.json that extends the rig configuration
• There’s a ./config/typescript.json for TypeScript plugin settings
• The package.json scripts call heft instead of gulp

This confirms you’re using the new Heft-based build system. This is the key difference compared to older SPFx projects. The Gulf file is also not there.

Your new package.json scripts section will look like this:

  "scripts": {
    "build": "heft test --clean --production && heft package-solution --production",
    "start": "heft start --clean",
    "clean": "heft clean",
    "eject-webpack": "heft eject-webpack"
  }

You can refer to the screenshot below:

Notice a couple of things here. First, the bundle task is gone — in Heft, build handles both building and bundling in one step. Second, there’s a brand new deploy command (heft dev-deploy) that didn’t exist in the Gulp world.

After npm install finishes, if you haven’t already, run:

heft trust-dev-cert

Update the Workbench URL

Before testing your web part, make sure to update the initialPage in the serve.json file. Replace {tenantDomain} with your actual SharePoint tenant URL so the local workbench opens correctly in your environment. You can check the screenshot below.

Run the Project

Instead of the old Gulp command:

gulp serve

You now use:

npm run start
# or
heft start --clean

After running the command, the local workbench will open in your browser. At this point, you may see a prompt asking “Allow debug scripts?”. This is expected when running SPFx solutions locally, as the page is loading scripts from your development machine.

Since you are testing your own code, you can safely click “Load debug scripts” to proceed and continue testing your web part.

Then, the page below will open. Click the + Add icon and find your web part. You can either search for your web part name, and it will display.

Once you’re confident that your SPFx web part is working as expected, the next step is to prepare it for deployment. Run the command below to create the package, and once it completes, you’ll find the .sppkg file inside the sharepoint folder, as shown in the image below.

heft package-solution --production

Now upload the generated .sppkg file to your tenant app catalog or site collection app catalog. The deployment process remains the same as before, so you can follow the usual steps you’ve already used for deploying SPFx solutions.

The Building Blocks: Actions, Phases, Tasks, and Rigs

Now you need to understand how Heft organizes work. It has a specific vocabulary, and once you know these four terms, everything clicks.

• Actions are the top-level commands you run from the CLI. For example, heft build, heft test, heft start. These are similar to the gulp tasks you used to have.
• Phases are logical groupings of work within an action. The build action might contain a build phase and a test phase.
• Tasks live inside phases. A task is a single unit of work — like compiling TypeScript, compiling Sass, or running ESLint.
• Rigs are the really clever part. A rig is a shared, reusable configuration package. Instead of every SPFx project carrying its own massive heft.json file with all the build logic, your project points to a rig package (@microsoft/spfx-web-build-rig) that contains all the default build configuration. Your project only defines what’s different from the default.

In practice, a new SPFx v1.22 project has a very lean ./config/rig.json file that looks like this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
  "rigPackageName": "@microsoft/spfx-web-build-rig"
}

That single file tells Heft: “use all the build phases, tasks, and configurations defined in the SPFx rig package.” Clean and simple.

Read Build a Custom Slides Manager in SPFx Web Part Property Pane

Heft vs. Gulp — A Clear Summary

Since this distinction causes a lot of confusion, let me summarize it clearly in one place:

If you’ve been using the old toolchain, here’s the side-by-side comparison you need:

If you’re starting fresh with SharePoint Online, always use the Heft-based toolchain. If you open someone else’s older project, check the SPFx version in package.json to know which toolchain applies.

Manage Multiple SPFx Versions on One Machine

As you work on more projects over time, you may encounter situations where different projects require different SPFx versions — and therefore different Node.js versions. This is common when maintaining legacy solutions alongside new ones.

The Microsoft documentation suggests these approaches:

• Node Version Manager (NVM): Install multiple Node.js versions side-by-side and switch between them with a single command. For macOS/Linux, use nvm. For Windows, use nvm-windows. This is the most practical approach for most developers.
• Virtual Machines: Run each environment in a completely isolated VM.
• Docker: Use Docker containers to fully isolate each environment.

For most developers, NVM is the simplest solution. Once it’s installed, switching Node.js versions is as easy as typing nvm use 22 or nvm use 18.

Conclusion

In this tutorial, I explained how to set up your SPFx development environment using the Heft toolchain step by step. The key things to remember are: use Node.js v22 LTS, install the Heft toolchain (not Gulp) since you’re on SPFx v1.22+, and trust your developer certificate before testing locally. If you ever switch machines or work with an older project that uses SPFx v1.21.1 or below, refer back to the Gulp-based setup guide — the commands and tools are different.

From here, every SPFx project you scaffold will follow the same pattern: run yo @microsoft/sharepoint, answer the wizard, run npm install, and start building.

Do let me know in the comments below if you face any issues.

You may also like the following tutorials:

• Build a SharePoint Folder Tree View Using SharePoint Framework (SPFx)
• SharePoint Framework (SPFx) Interview Questions and Answers
• Display SharePoint List Items in SPFx Web Part
• Fluent UI React Dropdown in SharePoint Framework (SPFx)

In this tutorial, I’ll walk you through why Teams auto-mutes you when you join, how to control it (to the extent you can), what meeting organizers can do, and how IT admins can configure it at scale.

Why Does Teams Mute Me Automatically?

Before jumping into fixes, it helps to understand why this happens. Teams doesn’t randomly decide to mute you — there’s a logic behind it.

Here are the main reasons you might join a meeting on mute:

• More than 5 people are already in the meeting. Teams automatically mutes you when you join a meeting with 5 or more participants. This is intentional — it protects ongoing conversations from sudden background noise when a new person joins.
• The meeting organizer has restricted mic access. The organizer may have turned off mic permissions for attendees before or during the meeting.
• Your IT admin has set a policy. If you’re in a company environment, your admin may have enforced a policy that mutes attendees by default.
• Teams remembered your last state. In newer versions of Teams, it tries to remember how you joined your last meeting — muted or unmuted — and applies that preference going forward.

So the first thing to figure out is: why are you being muted? The fix depends on the cause.

Microsoft Teams Auto Mute On Join

Let’s discuss 4 different methods!

Method 1: Control Your Mute State on the Pre-Join Screen in Teams

Every time you join a Teams meeting, you see a preview screen before entering — the one showing your camera feed and mic status. This is your best chance to control whether you join muted or unmuted.

Here’s what to do:

1. Click the meeting link or join from your Teams calendar.
2. On the pre-join screen, look at the microphone icon at the bottom.
3. If it shows as muted (crossed-out mic), click it to toggle it on before you join.
4. Click Join now.

The important thing here is: Teams remembers this setting. So if you join a meeting with your mic on, the next meeting should default to having your mic on too. If you keep joining muted, Teams will assume that’s your preference.

Real example: Say you’ve been joining your daily standup on mute every morning. Teams has now “learned” that you prefer joining muted. To reset this, just unmute yourself on the pre-join screen the next time and join the meeting. Teams should remember that for future meetings.

Note: This only works if you’re the first 4 people in the meeting or close to it. If 5+ people are already in there, Teams will override your preference and mute you regardless — that’s the auto-mute rule kicking in.

Method 2: Check If Teams Is Set to “Don’t Use Audio”

This one catches a lot of people off guard. If you’ve ever plugged in or unplugged a headset during a meeting, Teams may have silently switched your audio setting to “Don’t use audio,” so you join meetings without audio. You’ll hear nothing, and your mic won’t work.

Here’s how to fix it:

1. Start a new test meeting (you can use Meet now and join by yourself).
2. On the pre-join screen, look at the audio options — you might see it says “Don’t use audio” instead of “Computer audio.”
3. Click that and switch it to Computer audio.
4. Join the meeting and then leave.

Teams remembers this change, and your next real meeting should work properly.

Method 3: The Hard Truth About the “Always Join Muted” Toggle

If you’re looking for a setting somewhere in Teams preferences that says “Always join meetings muted” or “Always join meetings unmuted,” it doesn’t exist anymore.

Microsoft removed this user-configurable toggle in a recent Teams update. Previously, you could find it under Settings > Devices, but that option is no longer available in current versions of Teams. The reasoning from Microsoft is that Teams now dynamically handles muting based on meeting size and remembered preferences.

So if a colleague tells you “just go to Settings and toggle it,” they’re probably thinking of an older version of Teams. The current behavior relies on:

• The 5-participant threshold rule
• What you did on the pre-join screen last time
• Any policies your admin or meeting organizer has set

Method 4: For Meeting Organizers — Control How Attendees Join

If you’re running the meeting, you have much more control over this. You can decide whether attendees join muted, whether they can unmute themselves, or whether they’re completely mic-disabled.

Option A: Set It Before the Meeting

1. Open Teams and go to your Calendar.
2. Create or open your scheduled meeting.
3. Click Meeting options (you’ll see this link in the meeting details).
4. In the Meeting Options window:
   • Set “Who can present?” to “Only me” or “Only organizers and co-organizers.” This gives everyone else the Attendee role.
   • Set “Allow mic for attendees” to Off if you want everyone to join muted and stay muted until you let them speak.

Option B: Control Muting During the Meeting

Even if you didn’t set it up beforehand, you can manage mutes live:

• To mute one person: Go to the People panel, hover over their name, click the three dots, and select Mute participant.
• To mute everyone at once: In the People panel, click Mute all next to “In the meeting.”
• To disable mics entirely (so attendees can’t unmute themselves): Go to meeting controls > More options > Manage audio and video > toggle on Disable mic for attendees.

This last option is what Microsoft calls “hard mute” — it’s great for large webinars, training sessions, or town halls where you only want specific people speaking.

Real example: You’re hosting a company-wide all-hands with 200 attendees. Before the meeting, you set “Allow mic for attendees” to Off. Everyone joins muted and can’t unmute. If someone wants to ask a question, they use the Raise Hand feature, and you selectively let them speak.

Quick Tip: Use CTRL + Spacebar to Temporarily Unmute

Here’s a small but really useful thing that not many people know. If you’re in a meeting and you’re muted, you don’t always have to click the mic button to say something quickly.

Just hold CTRL + Spacebar (on Windows) while you’re talking. The moment you release it, you go back on mute. It’s like a push-to-talk button.

This is super handy when you’re in a large meeting where you’re mostly listening but need to say something briefly without having to toggle mute on and off repeatedly.

When Auto-Mute Is Actually a Good Thing in Teams

I know this whole tutorial started because auto-mute felt annoying. But honestly, auto-muting when you join a large meeting is one of the smarter things Teams does.

Think about it — if you join a meeting with 20 people and your mic is live, everyone hears your keyboard clicks, your dog barking, your chair squeaking. The 5-person threshold rule exists specifically to prevent that kind of disruption.

The real problem is when Teams mutes you during a small one-on-one call, or when you want to join unmuted but can’t figure out how to change it. That’s the legitimate frustration — and hopefully the methods above help you deal with it.

Summary of When Teams Auto-Mutes You

Conclusion

I hope you found this article helpful. In this guide, I explained why Microsoft Teams mutes you when you join a meeting. I also shared different methods to control your mute settings. These steps are simple and easy to follow.

If you are facing the same issue, try the steps in this article. They can help you manage your audio better during meetings. This will make your meetings smoother and less stressful.

Also, you may like:

• Add a New Attendee to a Meeting Without Email Others Using Power Automate
• Download Attendance List From Microsoft Teams After a Meeting
• 3 Best Ways to Turn On Translate in Microsoft Teams Meeting
• Microsoft Teams vs Zoom

The good news? Microsoft Teams makes this pretty straightforward once you know where to look. In this tutorial, I’ll walk you through every method — from the quick drag-and-drop trick to handling recurring meetings — so you’re covered no matter what situation you’re in.

What You Need to Know First

Before we jump in, here’s one important thing to keep in mind: only the meeting organizer can reschedule or cancel a meeting. If you were just invited to a meeting and you need it changed, you’ll have to reach out to whoever set it up.

Also, when you reschedule or cancel a meeting in Teams, all attendees automatically get a notification. You don’t need to send a separate email. Teams takes care of that for you.

How to Reschedule a Teams Meeting

There are a few different ways to do this, depending on how fast you want to move and how many changes you need to make.

Method 1: The Quick Drag-and-Drop (Fastest Way)

This is hands down the quickest method if you just need to shift a meeting to a nearby time slot on the same day or within the same week.

Here’s how to do it:

1. Open Microsoft Teams and click on Calendar in the left sidebar.
2. Find the meeting you want to reschedule.
3. Click and hold the meeting, then drag it to the new time slot on your calendar.
4. Drop it in place.

The moment you drop it, Teams will show you a pop-up telling you whether your attendees are available at the new time. That’s a genuinely useful feature — you can check availability without opening the Scheduling Assistant separately.

5. If everything looks good, click Send.

That’s it. All attendees get notified automatically with the new time.

Example: Say you have a 2 PM project sync on Wednesday and you need to push it to 4 PM the same day. Just drag it down on the calendar view and drop it at the 4 PM slot. Done in under 10 seconds.

One limitation here: Drag-and-drop only works within the same week view. If you need to move a meeting to a different week, use the method below.

Method 2: Edit the Meeting Details (Most Control)

This is the method to use when you need to change the date, time, add or remove attendees, or update the meeting description all at once.

1. Go to Calendar in Teams.
2. Click on the meeting you want to change — this opens a summary panel on the right side.
3. Click Edit (pencil icon).

4. The meeting editor will open. From here, you can:
   • Change the date and time
   • Update the title or agenda
   • Add or remove attendees
   • Change the meeting duration
   • Update any notes in the description field
5. Once you’ve made your changes, click Send Update.

All attendees will receive an updated calendar invite with the new details.

Tip: Before you finalize the new time, use the Scheduling Assistant tab inside the meeting editor. It shows everyone’s free/busy status in a grid so you can pick a slot that works for the whole group.

Method 3: Reschedule via Outlook (Best for Different Weeks)

If you need to move a meeting to a completely different week, Teams’ drag-and-drop doesn’t help much. The easiest workaround is to use Outlook — either the desktop app or Outlook on the web.

1. Open Outlook or go to outlook.office.com.
2. Click on Calendar in the left menu.
3. Find the meeting you want to move.
4. Drag and drop it to the new date and time in the Outlook calendar view.
5. When prompted, choose whether to send an update to attendees.

Once you make the change in Outlook, it syncs back to Teams automatically. If Teams doesn’t refresh immediately, just click away from the calendar view and click back — it’ll update.

Reschedule a Recurring Meeting in Teams

Recurring meetings need a bit more thought. When you go to edit one, Teams will ask you a question: Do you want to change just this one occurrence or the entire series?

Here’s how to handle both scenarios.

Changing Just One Occurrence

Let’s say you have a weekly Monday standup and you need to skip one week because of a public holiday, but you want to hold it on Tuesday instead.

1. Go to Calendar and find that specific Monday occurrence.
2. Click on it, then click Edit.
3. Teams will ask: Edit this event or all future events? Choose This event (or “Just this one”).
4. Change the date and time.
5. Click Send Update.

Only that one instance gets rescheduled. Your regular weekly meeting stays untouched.

Changing the Entire Series

If the whole recurring schedule needs to shift — say you’re moving a bi-weekly meeting from Fridays to Thursdays going forward:

1. Open any occurrence of the recurring meeting.
2. Click Edit.
3. When prompted, choose All events (or “This and all future events,” depending on your Teams version).
4. Make your changes to the date, time, or recurrence pattern.
5. Click Send Update.

Everyone gets a fresh invite reflecting the updated schedule.

Important: Channel meetings (meetings tied to a Teams channel) have some restrictions on editing individual occurrences. If you run into trouble, the most reliable fix is to make the change through Outlook on the web instead.

How to Cancel a Teams Meeting

Canceling a Teams meeting is even simpler. Again, only the organizer can do this.

Method 1: Cancel from the Teams Calendar

1. Open Teams and click on Calendar.
2. Find the meeting you want to cancel.
3. Click on it to open the details panel.
4. Click Edit.
5. In the top menu, look for the Cancel Meeting button and click it.
6. A message box will appear — you can type a short note explaining why the meeting is cancelled. Something like “This meeting has been cancelled. We’ll reschedule next week.” goes a long way.
7. Click Send Cancellation.

All attendees receive a cancellation notice, and the meeting is automatically removed from their calendars.

Method 2: Cancel a Recurring Meeting

When you cancel a recurring meeting, Teams gives you two choices:

• Cancel this occurrence — removes just this one meeting from everyone’s calendars
• Cancel the series — removes the entire recurring meeting for all future dates

Here’s how:

1. Open the recurring meeting from your Calendar.
2. Click Edit.
3. Click Cancel Meeting.
4. Choose whether you want to cancel just this occurrence or the entire series.
5. Add an optional message, then click Send Cancellation.

Example: You have a monthly team check-in, but December’s session isn’t needed because everyone’s on holiday. Cancel just that one occurrence, and your January meeting stays scheduled as normal.

What If You See a “Delete” Button Instead of “Cancel”?

If you notice a Delete button instead of a Cancel Meeting button, it usually means no external attendees were invited — it might be a meeting you set up just for yourself, like a personal reminder or a quick internal block. Clicking Delete just removes it from your calendar without sending any notifications.

Cancel a Teams Meeting on Mobile

If you’re away from your desk, you can cancel or reschedule from the Teams mobile app too.

1. Open the Teams app on your phone.
2. Tap the Calendar icon at the bottom.
3. Tap on the meeting you want to change.
4. Tap Edit or Cancel, depending on what you need.
5. If it’s recurring, choose whether to update just this occurrence or the whole series.
6. Add a message for your attendees.
7. Tap Send.

It works exactly like the desktop version — just on a smaller screen.

A Few Things to Keep in Mind

• You must be the organizer to reschedule or cancel. If you’re an attendee, you can only decline — not cancel.
• Always add a message when cancelling. Even one sentence helps attendees understand what’s happening and whether to expect a rescheduled meeting.
• Check the Scheduling Assistant before confirming a new time. It saves the back-and-forth of finding a slot that works for everyone.
• Recurring channel meetings can be tricky to edit from Teams directly. When in doubt, use Outlook on the web — it’s more reliable for those cases.
• If someone wasn’t invited to the meeting originally and you need to add them before rescheduling, open the meeting editor, add their name in the attendees field, then send the update. They’ll get the full invite.

Conclusion

I hope you found this article helpful. In this guide, I explained how to reschedule or cancel a meeting in Microsoft Teams. I also showed different methods, such as drag-and-drop, edit options, and Outlook. These steps are simple and easy to follow.

If you need to reschedule a meeting, choose the method that best suits your situation. Be careful when updating recurring meetings. Also, inform your attendees clearly about any changes. This will help avoid confusion and keep everyone updated.

Also, you may like:

• 6 Various Ways to Start an Instant Message in Microsoft Teams
• Microsoft Teams Auto Mute When Joining a Meeting
• Whiteboard in Microsoft Teams On Laptop
• Create an Announcement in Microsoft Teams
• Send a Microsoft Teams Invite [5 Best Methods]
• 4 Tricky Ways to Change Password in Microsoft Teams

The good news? You can set Microsoft Teams as your default meeting provider in Outlook so that every new meeting you create automatically comes with a Teams link — no extra clicks needed.

In this tutorial, I’ll walk you through how to do this across different versions of Outlook: Classic Outlook (desktop), New Outlook, Outlook on the Web, and Outlook for Mac.

Why Set Teams as Default?

Before jumping into the steps, let me quickly explain why this matters beyond saving a click or two:

• Consistency — Everyone on your team gets a Teams link without you having to think about it.
• Less manual work — No more forgetting to attach the meeting link before hitting Send.
• Better attendee experience — Your invites always look complete and professional.
• Works across time zones — Whether you’re inviting someone internal or external, the link is always there.

If your organization is fully remote or hybrid and uses Teams as its primary communication tool, making it the default just makes sense.

Before You Start: Check These Two Things

No matter which method you use, make sure:

1. Microsoft Teams is installed on your computer. The Teams add-in for Outlook only shows up if Teams is already installed and active.
2. You’re signed in to both Outlook and Teams with the same Microsoft 365 work or school account. If the accounts don’t match, Teams won’t appear as a meeting provider option.

If Teams is missing from Outlook entirely, I’ll cover that fix at the end of this tutorial.

Set Microsoft Teams as the Default Meeting in Outlook

Now I will show you how to set Microsoft Teams as the default meeting in Outlook.

Method 1: Classic Outlook for Windows (Outlook 2016, 2019, 2021, and Microsoft 365)

This is the most common version that most people are using at work. Here’s how to set Teams as the default:

1. Open Microsoft Outlook.
2. Click File in the top-left corner.
3. Click Options in the left sidebar. This opens the Outlook Options dialog.
4. In the left panel of the dialog, click Calendar.
5. Scroll down to the Calendar options section.
6. Check the box that says “Add online meeting to all meetings”.
7. Click the Meeting Providers… button (you’ll see this right below or next to that checkbox).
8. In the Online Meeting dialog that opens:
   • Make sure the “Add online meeting” checkbox is ticked.
   • Under the list of providers, select Microsoft Teams.
9. Click OK, then OK again to close out.

That’s it. From now on, every new meeting you create in Outlook will automatically include a Microsoft Teams link. You don’t need to touch anything else when creating the invite.

Quick tip: If you see multiple accounts in the dropdown inside that Online Meeting dialog, make sure you pick the right one. If you use a personal account alongside your work account, Teams will only work as the default for your work (Microsoft 365) account.

Method 2: New Outlook for Windows

Microsoft has been rolling out the New Outlook as the updated version for Windows users. The interface looks different, and so do the steps.

1. Open the New Outlook app.
2. Click the Settings gear icon in the upper-right corner.
3. In the Settings panel, go to Calendar.
4. Click on Events and invitations.
5. Under the Events you create section, toggle on “Add online meeting to all meetings”.
6. In the “Choose a meeting provider” dropdown, select Microsoft Teams.
7. Click Save.

Done. The new Outlook saves this at the account level, so if you have more than one account set up, look for the “These settings are applied at the account level” dropdown near the top of that section and make sure you’ve selected the right account before saving.

Method 3: Outlook on the Web (OWA)

If you use Outlook through your browser (the web version), the steps are almost identical to New Outlook.

1. Go to outlook.office.com and sign in.
2. Click the gear icon (Settings) in the upper-right corner.
3. Select Calendar from the left menu.
4. Click Events and invitations.
5. Check the “Add online meeting to all meetings” box.
6. Under “Choose a meeting provider”, pick Microsoft Teams.
7. Hit Save.

This change only affects meetings you create through the web browser. If you also use the desktop app, you’ll need to set it there separately.

Method 4: Outlook for Mac

If you’re on a Mac, the process is slightly different but still straightforward.

1. Open Microsoft Outlook on your Mac.
2. Click Outlook in the top menu bar (next to the Apple icon).
3. Select Preferences.
4. Click Calendar.
5. Look for “Add online meeting to all meetings” and check that box.
6. Click Configure Providers next to it.
7. In the provider list, select Microsoft Teams as your default.
8. Close the preferences window.

Your Mac will now automatically add a Teams meeting link to every new event you schedule from Outlook.

Method 5: Admin-Level Default Setting (For IT Admins)

If you’re an IT admin and you want to set Microsoft Teams as the default meeting provider for everyone in your organization — not just yourself — you can do it from the Microsoft 365 admin center or using PowerShell.

From the Teams Admin Center:

1. Go to admin.teams.microsoft.com.
2. In the left menu, click Meetings > Meeting policies.
3. Click on the policy that applies to your users (usually “Global (Org-wide default)”).
4. Review and configure the online meeting settings as needed.

Using PowerShell (Exchange Online):

If you want to set the default meeting provider using PowerShell, you can use this command:

Set-MailboxCalendarConfiguration -Identity user@yourdomain.com -DefaultOnlineMeetingProvider TeamsForBusiness

Replace user@yourdomain.com with the actual user’s email. The value TeamsForBusiness is the official parameter value for Microsoft Teams in this cmdlet.

To apply it to all users in bulk:

Get-Mailbox -ResultSize Unlimited | Set-MailboxCalendarConfiguration -DefaultOnlineMeetingProvider TeamsForBusiness

This is the most efficient way if you’re managing a large organization and don’t want each user to change it manually.

Switching Default from Zoom or Webex to Teams

If your organization previously used Zoom or Webex and you want to switch the default over to Teams, just follow Method 1 (or the method for your version of Outlook) and in the provider list, deselect Zoom or Webex and select Microsoft Teams instead. Outlook will follow your new preference going forward. Old meetings already created won’t be affected — only new ones.

Turning It Off — How to Stop Outlook from Auto-Adding Teams

If for any reason you want to stop Outlook from automatically adding Teams links to every meeting (maybe some meetings are in-person), here’s how to turn it off:

Classic Outlook:

• Go to File > Options > Calendar.
• Click Meeting Providers…
• Uncheck “Add online meeting to all meetings”.
• Click OK twice.

New Outlook / Web:

• Go to Settings > Calendar > Events and invitations.
• Toggle off “Add online meeting to all meetings”.
• Save.

Final Thoughts

Setting Microsoft Teams as your default meeting provider in Outlook is one of those small changes that saves you a surprising amount of time over a week. Once it’s set up, you stop thinking about it — and that’s exactly how it should be.

The steps vary slightly depending on which version of Outlook you’re using, but the core idea is the same: open the online meeting settings, check the box to add the meeting to all events, and select Microsoft Teams as your provider.

You may also like:

• Enable GIFs in Microsoft Teams
• Reschedule or Cancel a Teams Meeting in Microsoft Teams
• Print Microsoft Teams Chat
• How to Zoom In on Microsoft Teams
• Disable Notifications During a Meeting in Microsoft Teams