Blog

How to configure webpack for replacing your API module path by a Mock API Path

image

Hi,

I’ve been working with React, webpack and TypeScript for almost two years, and it still surprise me when I look for a really custom solution and I end up with a generic solution which will solve my specific problem in a generic way.

Today, I am going to write about how to configure webpack to provide different Module path depending on our configuration. In my scenario I have two different APIs one is the “REAL” one and other is the “MOCK”. And I’d like to use the mocked API for development configuration and the real one for Production.

Let’s say we have a function to get all terms of a given taxonomy term set (in SharePoint Online) in order to display them in a React application. We are going to describe how to create the real  API, Mock API, how to configure webpack to do the “generic replacement” and how to use the API.


Real API

Mock API


How to configure webpack

My recommendation is using a NormalModuleReplacementPlugin in our development configuration for webpack:

Usage

Enjoy!

@jquintozamora

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Post Navigation