Dev

By Carlos Santana on
Reading time: 3 minutes

ReactAndWindows-X8QHC.png

I'm not a big fan of Windows for development since it's kind of problematic to configure sometimes. Normally I always prefer Mac or Linux, but I'm aware that a lot of people use Windows for development. In this post, I'll show you the most common problems you can face when you work with React using Windows.

The terminal

The first problem you will face is to use the Windows terminal (CMD) because it does not support Unix commands (like Mac or Linux). The solution for this problem is to install a Unix terminal; the most highly recommended is to use Git Bash, which is included with Git when you install it, and the second option is to install Cygwin, which is a Linux terminal in Windows.

The environment variables

Another common problem using Windows is to set environment variables. Generally, when we write npm scripts, we set environment variables such as NODE_ENV or BABEL_ENV but to set those variables in Windows, you have to use the SET command. That means you need to do SET NODE_ENV=production or SET BABEL_ENV=development.

The problem with SET is that if you're working with other people that use Linux or Mac, they will have problems with the SET command, and probably you will need to ignore this file and modify it only for your local environment. This can be tedious. The solution to this problem is to use a package called cross-env; you can install it by doing: npm install cross-env.

This will work on Windows, Mac, and Linux:

{
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open",
    "start-production": "cross-env NODE_ENV=production webpack-dev-server --mode production"
  }
}

Case sensitive files or directories

In reality, this also happens on Linux and sometimes it is very difficult to identify this problem, for example, if you create a component in the path "components/home/Home.jsx" directory but in your code you're trying to import it like this: 

import Home from './components/Home/Home';

Normally this won't cause any problem on Mac but can generate an error on Linux or Windows because we are trying to import a file with a different name (because it's case-sensitive) into the directory.

Paths

Windows uses a backslash () to define a path, while in Mac or Linux they use a forward slash (/). This is problematic because sometimes we need to define a path (in Node.js mainly) and we need to do something like this:

Only members can see all the codes
You can Login or Sign Up

I hope you liked this post, remember you can join our Slack community or subscribe to our Youtube channel.

avatarLeave a comment

Your comment

Only members can comment. You can Login or Sign Up