Installing msw to work with the server side in Redux

In the previous lessons we made some additional changes to our application. Now we need to figure out the server with which our application will exchange data.

We won't have a real server, so we'll just simulate working with it using a cool tool Mock Service Worker. Mock Service Worker (MSW) is an API mocking tool that uses the standardized Service Worker API, which is designed to intercept requests at the network level. MSW will generate mock responses to our requests. Moreover, as the developers claim, the tool is so effective and flexible that after debugging with mocks (for which nothing special needs to be created in the application), the application can be put into operation with a real external server. The documentation on it is quite extensive, and if you are interested in msw, you can read it on the official website.

Let's move on to installing msw. To do this, open our project with products and enter the following in the terminal:

npm install msw --save-dev

For msw to work, we also need to create and copy mockServiceWorker.js to some public directory. Often this is the public folder. We have an empty public folder, let's copy it there. To do this, run the command in the terminal and then agree to use public:

npx msw init public

Now let's look at public, the generated script mockServiceWorker.js should appear there. Now let's run our application with products and enter http://localhost:5173/mockServiceWorker.js in the browser address bar (since our application runs on 5173 port). Do you see the contents of the file mockServiceWorker.js displayed in the browser window? Then everything is great, let's move on.

Next, let's create a folder api in the src folder, and in it a file server.js, in which we will write the server code. Now let's open server.js and import the setupWorker function from the installed msw library:

import { setupWorker } from 'msw/browser'

Below in the file we will create a variable worker and export it:

export const worker = setupWorker()

Now let's open the main.jsx file and import our worker into it:

import { worker } from './api/server'

Now let's hook it up to our application. To do this, we'll wrap the code that we use to create the root of our React application in a function, call it main and add the worker launch function to it as the first line. Of course, we won't forget to call main itself. The full code after all the import lines will now look like this:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

Now we are sure that our application will not start working (and send requests ;) ) before the worker starts.

Let's run our application and open the developer console in the browser. If you see the text '[MSW] Mocking enabled.', then you are great and have installed everything correctly!!!

Open your app with your students. After reviewing this lesson, install Mock Service Worker for your app.

Create a file server.js and create a worker in it. Attach the worker to the application in main.js as shown in the tutorial. Make sure everything works.