All web frontend and nodejs libraries are readily available to use as you like.
From these libraries, React, is the indispensable frontend framework, which has a significant adoption from web developers.
Therefore using NW.js with React could be a great duo from a productivity standpoint.
Using React for a web project is a pleasure for developers. It has a great development workflow and also many tools that make you productive.
The React Developer Tools Chrome extension is one of them.
By using React Developer Tools, you can inspect your react components at runtime. Unfortunately, it is not comfortable and pain-free using in another environment like NW.js.
Official NW.js documentation gives some instruction:
- Copy react devtools chrome extension directory to a known place.
- Modify manifest.json of the extension to add extra permission (chrome-extension://*)
- Run nw.js with –load-extension parameter.
Very easy and clear, except it does not work. React tab is shown successfully, but it can’t connect to the application.
So I decided to try another method. Standalone react developer tools application works flawlessly.
Let me explain step by step how I enable react developer tools for my NW.js project.
I’m using the N-PUZZLE project from (NW.js documentation) as a sample project.
Download the sample project from this link.
1) Install React Developer Tools as a standalone package.
npm install -g react-devtools
2) Run the command below from the terminal to launch the standalone DevTools app:
DevTools application pops up:
3) Add the URL, http://localhost:8097 to the index.html file of the NW.js project.
Updated index.html file:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="Sherub Thakur" /> <link rel="stylesheet" href="css/bundle.css" /> <title>N-Puzzle</title> <script src="http://localhost:8097"></script> </head> <body> <div id="n_puzzle"> </div> <script src="build/build.min.js"></script> </body> </html>
4) Run your NW.js project (You are at the root folder in terminal):
Now you can inspect your React components.
React Developer Tools:
As you see devtools application connects automatically with your NW.js application.
The sure-fire way to use react-devtools in an NW.js project is the standalone react developer tools package.
If you have any idea or comment, please share.