Support developing on Windows

[ivan-aksamentov]

Currently we only support Unix-based platforms and the dev configuration contains some Unix-isms that Windows cannot digest.

We want to support running the app on windows as well, to reach more contributors.

See also:

• Questions, discussions #18 (comment)

[jamesgecko]

Carrying over the conversation from that ticket, this line is indeed problematic.

covid19_scenarios/config/nodemon/dev.json

Line 32 in 00a3b2f

"exec": "node -e 'console.clear()'; yarn dev:clean; yarn install && yarn dev:nowatch; true"

It's an easy fix; that last bit of the command should look like yarn dev:nowatch ; true", with a space before the semicolon.

The next thing making the Windows build fail is that package.json is referencing bash scripts. There are two versions of each script in node_modules/.bin. For example, webpack-dev-server and webpack-dev-server.cmd. The .cmd ones are scripts for Windows, the ones without an extension are for bash. The command yarn webpack-dev-server executes the correct script on each platform. But in package.json, commands like dev:nowatch directly reference specific bash scripts in that directory.

My first thought was that there might be a way to get get yarn to tell us which script we need. But while yarn bin webpack-dev-server provides a path to the script referenced, it doesn't take platform into account.

[AmadeusW]

If someone wants to develop on Windows right now, before this issue is resolved: consider enabling Windows Subsystem for Linux for development.

[rcbevans]

I'll look into this now

[ivan-aksamentov]

@rcbevans Hi Rich, thanks!
If you'll be looking into this, let me know if you have any other suggestions along the way, regarding the build, dev experience or otherwise.

[ivnnv]

Hi,
I have been successfully able to run the project on Windows 10 (if you are not yet on Windows10, you should), and using Windows Subsystem for Linux + Ubuntu bash on VSCode.

Note: Below steps are not only required for this project, I recommend you to use WSL + Ubuntu for ANY non-windows specific project (Windows is not the best platform for javascript develop). So this is something that you will need to do only once, and then benefit of all the *nix improved developer experience.

Steps:

1. Install WSL + Ubuntu distribution following the official how-to
   This is not just r

2. Setup your Command Prompt or any other Terminal management app to use the Ubuntu bash by default.
   You can just use the integrated terminal in VSCode, it works like a charm.
   For this, you need to add this config line to your settings.json file:

"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe",

3. Open your bash and install nvm (Node Version Manager). This will allow you to install not only the required version of Node for this project: (12.16.1), but any other version for any other project and you will be able to easily install and switch versions when needed:

nvm install xx.yy.zz
nvm use xx.yy.zz

4. Install Yarn globally, as its the package manager for this and many many other javascript projects nowadays:

sudo apt update && sudo apt install yarn

5. You are ready to run the project now following the standard instructions:

yarn install
yarn dev

6?) For contributing: you will also need a version control management solution, but this is something you should be already familiar with.
You have plenty of options: install git by yourself using the windows installer or installing it on the Ubuntu subsystem doing sudo apt install git-all, or use Github Desktop. That's your choice.

@ivan-aksamentov May I add this steps into a CONTRIBUTING.md file or the README.md file? I'll create the PR by myself for you just to merge.

[tarsisexistence]

@ivnnv is there any option to run this only using windows 10 (without Windows Subsystem for Linux)

[dilantha111]

Hi @ivnnv I tried windows subsystem approach. But I am stuck here when I run "yarn dev" for nodemon also got the same error so I installed it globally. Maybe dev dependencies are not properly installed or something ? Any clue ?

$ cross-env NODE_ENV=development BABEL_ENV=development babel-node node_modules/.bin/webpack-dev-server --config config/webpack/webpack.client.babel.ts
/bin/sh: 1: cross-env: not found
error Command failed with exit code 127.

[ivnnv]

@maktarsis, as suggested, its much easier and future-proof to use WSL for any JS development,, I wont even try to waste time trying to run any JS project without WSL.

@dilantha111 dependencies are properly set, I didn't do anything special butof following the steps one by one (remember to have .env file, to have installed and using the exact version of node (12.16.1), remove node_modules and install again.

[dilantha111]

@ivnnv I am not sure what went wrong first. But I cloned it to the inside the ubuntu. And connected with vscode remote-wsl plugin. Now it's working fine. Thanks.

[ivan-aksamentov]

@dilantha111 @ivnnv @maktarsis @jamesgecko @AmadeusW @rcbevans @kmid5280 @alfredorevilla

Could you please check this setup in plain Windows CMD for me branch dev/fix-windows-dx):

git clone https://github.com/neherlab/covid19_scenarios -b dev/fix-windows-dx
cd covid19_scenarios
yarn install
copy .env.example .env
yarn dev

and then

yarn prod:watch

Please clone fresh as shown above!
I tested on Windows 7 VM and it seem to be working okay. Would be nice to have a confirmation for Windows 10 as well.

[rcbevans]

I'll give it a try shortly. I got most of the way there there on Friday before a Sev0 came up at work and I didn't get back to this, sorry!

[tarsisexistence]

@ivan-aksamentov

I can confirm that it works on windows 10

[tarsisexistence]

consider to pull it in master asap
thanks @ivan-aksamentov

[jamesgecko]

Windows 10 here. It works with the following warning:

WARN  Compiled with 1 warnings                                                                               1:51:24 PM
 warn  in ./node_modules/moment/src/lib/locale/locales.js                                                     1:51:24 PM
Module not found: Error: Can't resolve './locale' in 'C:\Users\James\code\win-covid19\node_modules\moment\src\lib\locale'

Additionally, the yarn dev console log says it's running from http://0.0.0.0:3000/, but it only appears to be accessible via http://localhost:3000/.

I can open the compiled site in the browser and click around without any obvious issues.

---

Side note, it appears to behave identically for me regardless of if I'm doing a fresh clone or pulling down the branch in an existing clone with the following commands.

git fetch origin dev/fix-windows-dx
git checkout origin/dev/fix-windows-dx

[ivan-aksamentov]

Thanks folks! It's on master now.

Here is a summary of changes:
https://github.com/neherlab/covid19_scenarios/compare/de97b3b..28b1468

The warning in moment's locales is still to be fixed. It was on Unix too, but this snippet from the interwebs solved it:

covid19_scenarios/config/webpack/webpack.client.babel.ts

Lines 327 to 339 in 28b1468

	// Setup for `moment` locales
	new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
	if (!context.context.includes('/moment/')) {
	return
	}
	// context needs to be modified in place
	Object.assign(context, {
	// include only CJK
	regExp: /^\.\/(en|de)/,
	// point to the locale data folder relative to moment's src/lib/locale
	request: '../../locale',
	})
	}),

I suspect path separators need to be adjusted for Windows.

[kmid5280]

@ivan-aksamentov So far so good on my end. It's running on my machine with the recent changes.

[ivan-aksamentov]

@eloisetaylor5693 reported that webpack-dev-server serving on 0.0.0.0 does not work properly for them:
#114 (comment)

localhost or 127.0.0.1 will not work for me personally, as I tend to run servers on a remote machine in a container, connecting local browser to them ans syncing the code changes to there.

0.0.0.0 works for me on Windows 7 VM too, but Firewall asks for a permission before server starts.

Could it be just a Windows Firewall one-off issue? Or is it systematic?

Do you folks have any thoughts on that? Feel free to patch if needed.

[jamesgecko]

My Windows 10 machine does not respond to 0.0.0.0. I can ping 127.0.0.1 but not 0.0.0.0. This seems to be a "loosely defined concept that is implemented differently on various platforms" thing. Your VM's network driver may be binding it. https://superuser.com/a/950021

[ivan-aksamentov]

@jamesgecko, so does current dev setup work for you or not?

My VM does not have a network adapter. Maybe it does some magic otherwise, but again it works for 5 people above on their machines.

All I care is that you can run yarn dev and then open a browser, type http://localhost:3000 and it opens the app.

If it does not, please submit the PR that fixes it or uses a configurable variable for host param

[jamesgecko]

Yes, http://localhost:3000 works.

[ivan-aksamentov]

I am closing this then. If someone has any other suggestions, please open another issue or a PR.