Skip to content

pnp/sp-livereload

Repository files navigation

PnP SPFx Live Reloader

SPfx Live Reloader Logo

Download the latest version

Summary

Enables your SharePoint Framework Solutions to automatically refresh the browser window after rebuild.

FAQ

How is it different from spfx-fast-serve?

PnP SPFx live reloader supports projects from SPFx (SharePoint Framework) Version 1.0 onwards. After a successful build, SharePoint will automatically reload the updated code using a built-in mechanism.

spfx-fast-serve, on the other hand, requires Microsoft-unsupported manipulation of the SPFx build chain.

Are there any additional requirements?

The PnP SPFx Live Reloader is a custom application customiser that can be connected to any SPFx project with zero configuration effort for your current and upcoming projects.

Will this make SharePoint Framework development faster?

Many factors of your system configuration and hardware influence the performance of the SharePoint Framework build chain. To make something faster or slower is always highly subjective.

However, PnP SPFx Live Reloader gives you a smoother development experience by not having to reload the browser manually and look for the SharePoint Framework build chain to complete all its tasks.

You can focus on your code rather than when it is time to reload your browser.

Used SharePoint Framework Version

version

Applies to

Prerequisites

None so far.

Solution

Solution Author(s)
PnP SFPx Live Reloader Stefan Bauer - N8D, Twitter, LinkedIn

Version history

Version Date Comments
1.1 July 23, 2024 Credits and Branding Information added
1.0 July 11, 2024 Initial release

For details look at the CHANGELOG

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Installation

  1. Download the latest release
  2. Create a site collection app catalog in your development environment - DO NOT INSTALL GLOABLLY
  3. Add 'PnPSPFxLiveReloader.sppkg' to this app site catalog and install
  4. You will see the following bar at the bottom of your browser window.

Minimal Path to Awesome

  • Clone this repository
  • Ensure that you are at the solution folder
  • in the command-line run:
    • npm install
    • gulp serve

Features

For now just reload the Browser Window once the browser have been reloaded.

References