Setting up locally odk central front end and odk central back end for development on windows 7

[nitheesh]

1. What is the problem? Be very detailed.
Is it possible to set up locally odk central front end and odk central back end for development, on windows 7 ?
I cloned the repo of odk central backend, opened it in vscode and executed the necessary commands provided in the github.
Then I cloned the repo of odk central front end, opened it in vscode, then executed npm install command, then executed npm run dev, but I am getting error on executing npm run dev, error is below,

npm run dev

odk-central-frontend@0.1.0 dev
vue-cli-service build --mode development --watch

• Building for development...

ERROR Failed to compile with 1 errors 10:26:53 PM

error in ./src/locales/en.json5

Module parse failed: Unexpected token (8:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| {
| // This is the text shown as the title of a page including in the browser tab.

"title": {
| "resetPassword": "Reset Password",
| "setPassword": "Set Password",

@ ./src/i18n.js 15:0-50 79:22-38
@ ./src/main.js
@ multi ./src/main.js

ERROR Build failed with errors.

2. What app or server are you using and on what device and operating system? Include version numbers.
OS : windows 7
node version : v12.18.3
npm version : 7.11.1

3. What you have you tried to fix the problem?

I cloned the repo of odk central front end(https://github.com/getodk/central-frontend), opened it in vscode, then executed npm install command, then executed npm run dev

4. What steps can we take to reproduce the problem?

clone odk central front end from github to windows 7, exceute npm install, execute
npm run dev

5. Anything else we should know or have? If you have a test form or screenshots or logs, attach below.

[Matthew_White]

Hi @nitheesh! It should be possible to set up ODK Central for development on Windows, though some things will need to change. One example is the mime.types path in nginx.conf.

I think this error may also be related to paths. Loading en.json5 requires json5-loader. This is configured in vue.config.js, in part using this line:

.test(/\/src\/locales\/en\.json5$/)

However, maybe using / as the path separator here won't work on Windows? Does it work if you change the regular expression to /\.json5$/?

[nitheesh]

1. Replaced .test(/\src\locales\en.json5$/) with .test(/\\src\\locales\\en\.json5$/) in vue.config.js, then it worked and successfully executed npm run dev command.
   Also, as you said, within the nginx.conf file, commented the line
   include /usr/local/etc/nginx/mime.types;
   and added the line, include C:\nginx-1.19.10\conf\mime.types

2. Now facing problem on running the command nginx -c "$PWD/nginx.conf" -p "$PWD/dist/"
   Also not clear what this line("Finally, run NGINX by changing the working directory to the root directory of the repository") actually mean, don't know what command to execute for that line.I believe my working directory and root directory of the project is same at this stage of the execution.

3. Installation of nginx in windows, created nginx.conf file in this location (C:\nginx\conf) by default.
   ODK Central Front End folder is in the location : E:\GitHub\central-frontend
   nginx.conf file within ODK Central Front End folder is in the location : E:\GitHub\central-frontend
   dist folder within ODK Central Front End folder is in the location : E:\GitHub\central-frontend

4. I tried to execute nginx -c "%cd%\nginx.conf" -p "%cd%\dist" instead of nginx -c "$PWD/nginx.conf" -p "$PWD/dist/" within command prompt from the location C:\nginx> but it gave the following error:
   C:\nginx>nginx -c "%cd%\nginx.conf" -p "%cd%\dist"
   nginx: [alert] could not open error log file: CreateFile() "C:\nginx\dist"/logs/error.log" failed (123: The filename, directory name, or volume label syntax is incorrect)
   2021/04/30 00:11:14 [emerg] 17656#11652: CreateFile() "C:\nginx\nginx.conf" failed (2: The system cannot find the file specified)

5. I tried to execute nginx -c "%cd%\nginx.conf" -p "%cd%\dist" instead of nginx -c "$PWD/nginx.conf" -p "$PWD/dist/" within command prompt from the location E:\GitHub\central-frontend> but it gave the following error:
   E:\GitHub\central-frontend>nginx -c "%cd%\nginx.conf" -p "%cd%\dist"
   'nginx' is not recognized as an internal or external command,
   operable program or batch file.

[Matthew_White]

That's useful to know that that change to vue.config.js got things working. We should be able to update that regular expression.

I think (5) above is the closest to the instructions in the readme. The readme suggests running nginx in the same directory as the repository, which for you is E:\GitHub\central-frontend. You should also be able to specify E:\GitHub\central-frontend instead of %CD% if that makes things clearer. However, it looks like you need to find a way to run nginx from E:\GitHub\central-frontend.

You may also find it helpful to look more into the nginx -c and -p options and how the directory specified to -p is used in nginx.conf.