Using React on Windows

I'm not a big fan of Windows for development since it's kind of problematic to configure sometimes. I will always prefer Linux or Mac, but I'm aware that a lot of people who are reading this book will use Windows. In this recipe, I'll show you the most common problems you may have when you try to follow the recipes in this book using Windows.

How to do it...

We'll now see the most common problems using Windows for development:

1. Terminal: The first problem you will face is to use the Windows terminal (CMD) because it does not support Unix commands (like Linux or Mac). The solution is to install a Unix Terminal; the most highly recommended is to use the Git Bash Terminal, which is included with Git when you install it (https://git-scm.com), and the second option is to install Cygwin, which is a Linux Terminal in Windows (https://www.cygwin.com).
2. 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=production or BABEL_ENV=development, but to set those variables in Windows, you use the SET command, which means you need to do SET NODE_ENV=production or SET BABEL_ENV=development. The problem with this is that if you are 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, and this will work in 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"
    }

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

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

Normally, this won't cause any problems 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.

4. 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 mostly) and we need to do something like this:

    // In Mac or Linux
    app.use(
      stylus.middleware({
        src: __dirname + '/stylus',
        dest: __dirname + '/public/css',
        compile: (str, path) => {
          return stylus(str)
            .set('filename', path)
            .set('compress', true);
        }
      })
    );

    // In Windows
    app.use(
      stylus.middleware({
        src: __dirname + '\stylus',
        dest: __dirname + '\public\css',
        compile: (str, path) => {
          return stylus(str)
            .set('filename', path)
            .set('compress', true);
        }
      })
    );

    // This can be fixed by using path
    import path from 'path';
    
   // path.join will generate a valid path for Windows or Linux and Mac
    app.use(
      stylus.middleware({
        src: path.join(__dirname, 'stylus'),
        dest: path.join(__dirname, 'public', 'css'),
        compile: (str, path) => {
          return stylus(str)
            .set('filename', path)
            .set('compress', config().html.css.compress);
        }
      })
    );