(really, this is not React-specific--it's a way to setup your local environment with modern JavaScript tooling)

JavaScript Environment

1. I highly recommend installing installing Node Version Manager
   • why:
     • this tool makes installing and uninstalling multiple versions of Node.js super easy
     • this tool makes it easy to switch between different installed versions of Node.js
   • Microsoft Source: https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows
     • this source points to the github repo for NVM for windows
     • this source shows the basic nvm commands to use
   • NVM for windows github repo: https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows
   • note: if you already have a version of Node.js installed the NVM install process will detect it and ask if it should control that version
2. Install Node.js and NPM (I recommend all members of a team use the same versions)
   • either use NPM to install or go to Node.js online--super easy to find

Browser Extension for React Developer Tools (nice-to-have)

• React Docs on this tool: https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html

Visual Studio

(VS2019 and VS2022 and probably older versions, but i've only bothered to do it with VS2019 and VS2022)

1. Ensure the Visual Studio Node.js Development Workload is installed
2. Disable Visual Studio built-in NPM restore behavior
   • how
     • navigate to: Tools/Options/Projects and Solutions/Web Package Management/Package Restore
     • set BOTH "Restore On Project Open" and "Restore On Save" to False
   • why
     • NPM package management is a mine field
     • i want to lock package management behavior down to they way i configure for my project
     • this step is a way of preventing unforeseen problems by preventing automatic/generic behavior
3. Edit priority of external tools
   • how
     • navigate to Tools/Options/Projects and Solutions/Web Package Management/External Web Tools
     • set $(PATH) to 2nd place under .\node_modules\.bin
       • the default priority order is
         1. .\node_modules\.bin
            • this node_modules folder is where NPM packages are stored for the current project
            • the .bin folder: https://docs.npmjs.com/cli/v8/configuring-npm/folders#executables
         2. $(VSInstalledExternalTools)
            • this is where Visual Studio installs the packaged versions of external web tools like Node.js and NPM
            • (earlier versions of Visual Studio may have a different value--for example VS2015 in the source link)
         3. $(PATH)
         4. one last path for git
   • why
     • source: https://devblogs.microsoft.com/dotnet/customize-external-web-tools-in-visual-studio-2015/
     • ensure Visual Studio uses the version of Node.js/NPM that you installed instead of the version packaged with Visual Studio
4. ReSharper: if you have it, turn off for JavaScript and TypeScript (I recommend)
   • how
     • navigate to Extensions/Resharper/Options/Environment/Products & Features
     • uncheck "JavaScript and TypeScript"
   • why
     • ReSharper only supports up to v3.0 of TypeScript
       • (source: https://www.jetbrains.com/help/resharper/ReSharper_by_Language__TypeScript.html)
     • as a result, it was giving incorrect warning messages which was confusing and distracting
     • thankfully, there is great support for these languages built-into Visual Studio already

VS Code

1. install VS Code
2. install the C# Microsoft extension
   • enables support for running .NET Core projects and C# intellisense among other things
3. I recommend installing the "Jest Test Explorer extension"
   • and check its "Flatten Explorer" setting
   • with this extension, VS Code provides a really nice unit test running and debugging experience
   • the one downside:
     • i cannot get this to run my specific build script--as far as i can tell, there is not built-in support to tell the test runner to run with a specified build script (like my npm run test script)
       • to clarify, this is only the case for running the unit tests via this extension
     • this means there is no TypeScript type-checking during the build process
     • you still get TypeScript intellisense warnings and completion
4. setup a workspace
   • a workspace is a VS Code thing (https://code.visualstudio.com/docs/editor/workspaces)
   • why
     • the Jest Test Explorer extension will not work if there is no workspace
   • how
     • easiest way is to let VS Code do this automatically when you open a folder
     • navigate to File/Open Folder ...
     • open the folder that contains the csproj file
   • that's it, VS Code creates the workspace automatically--it creates a .vscode folder in the directory you opened
     • you would want to gitignore this .vscode folder

example solution: https://github.com/egnomerator/LibReactComponentsStarter

The rest of these notes are what I would do if working with a solution like the above linked example

1. clone the repository
2. run in debug mode (maybe rebuild solution first)

That's it, because the example solution has the JS build process integrated into the .NET build process in the .csproj file

• on build, it ensures the NPM packages are installed, it runs TypeScript type-checking, it builds the JS output
• then it continues with the normal MSBuild build process

the readme file

• it's worth taking a look at the readme file of that example solution
• it mentions a possible Webpack error that would show up depending on the Node.js version running
• it also has a way to fix this issue

In my opinion, it's really important to not let "surprise" NPM update happen--be in control.

So, before a commit

• more detail about the below steps here: https://github.com/egnomerator/misc/wiki/Build-Tools#a-helpful-way-to-check-for-exact-package-versions
• ensure that package.json and package-lock.json DO NOT have changes--unless intentional
• ensure that IF package.json and package-lock.json have intentional changes, that EXACT VERSIONS are set
  • regex pattern: "version": ((".{1}")|("(\^|~).*")|(".*(x|\*).*")|("[0-9]\.[0-9]")),?
• NOTE:
  • ALWAYS using the --save-exact flag when installing npm packages (not just for dev dependencies) ensures the full tree of dependencies are all locked to exact versions
    • e.g. npm install --save-dev --save-exact [email protected]