Issues setting up dev environment on windows (quickstart-react example)

[dnesh (Dan Nesher)]

Hello,

As part of the monday.com Builder Certification Pathway, I’m trying to set up a dev environment according to the example shown here:
https://github.com/mondaycom/welcome-apps/tree/master/apps/quickstart-react

I’ve downloaded and installed all requirements (including what’s mentioned in this thread), however I cannot seem to successfully complete the ‘npm start’ stage.

After running the command, the following output is shown:

monday-integration-quickstart-app@0.0.1 start
npm run stop && concurrently “npm run server” “npm run expose”

monday-integration-quickstart-app@0.0.1 stop
kill-port 8301 && kill-port 4049 && kill-port 4040

0 process was killed
0 process was killed
0 process was killed
[1]
[1] > monday-integration-quickstart-app@0.0.1 expose
[1] > ngrok http 8301
[1]
[0]
[0] > monday-integration-quickstart-app@0.0.1 server
[0] > react-scripts start
[0]

Then a Windows error pops up:

After hitting “Close”, this is the rest of the output:

[1] Access is denied.
[1] npm run expose exited with code 1
[0] i ｢wds｣: Project is running at http://192.168.68.118/
[0] i ｢wds｣: webpack output is served from
[0] i ｢wds｣: Content not from webpack is served from D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\public
[0] i ｢wds｣: 404s will fallback to /
[0] Starting the development server…
[0]
[0] Error: error:0308010C:digital envelope routines::unsupported
[0] at new Hash (node:internal/crypto/hash:71:19)
[0] at Object.createHash (node:crypto:133:10)
[0] at module.exports (D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\util\createHash.js:135:53)
[0] at NormalModule._initBuildHash (D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\NormalModule.js:417:16)
[0] at handleParseError (D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\NormalModule.js:471:10)
[0] at D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\NormalModule.js:503:5
[0] at D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\NormalModule.js:358:12
[0] at D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\loader-runner\lib\LoaderRunner.js:373:3
[0] at iterateNormalLoaders (D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
[0] at iterateNormalLoaders (D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
[0] D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\react-scripts\scripts\start.js:19
[0] throw err;
[0] ^
[0]
[0] Error: error:0308010C:digital envelope routines::unsupported
[0] at new Hash (node:internal/crypto/hash:71:19)
[0] at Object.createHash (node:crypto:133:10)
[0] at module.exports (D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\util\createHash.js:135:53)
[0] at NormalModule._initBuildHash (D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\NormalModule.js:417:16)
[0] at D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\NormalModule.js:452:10
[0] at D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\webpack\lib\NormalModule.js:323:13
[0] at D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\loader-runner\lib\LoaderRunner.js:367:11
[0] at D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\loader-runner\lib\LoaderRunner.js:233:18
[0] at context.callback (D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
[0] at D:\dnesh\Documents\Monday\quickstart-react\quickstart-react\node_modules\babel-loader\lib\index.js:55:103 {
[0] opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
[0] library: ‘digital envelope routines’,
[0] reason: ‘unsupported’,
[0] code: ‘ERR_OSSL_EVP_UNSUPPORTED’
[0] }
[0]
[0] Node.js v18.9.1
[0] npm run server exited with code 1

I would appreciate any help to resolve this, as I’m currently stuck and can’t make any progress with the certification pathway.

Thanks in advance,
Dan

[alessandra]

Hi @dnesh!

We had a bug in our example apps but have since introduced a fix. This error should no longer come up. Could you let me know if this issue still persists for you?

Thanks!

[dnesh (Dan Nesher)]

Hi @alessandra,

Thanks for getting back to me.

What should I do then?
Delete everything and download anew from github?

Because I reran “npm install” just a few days ago…

Dan

[dnesh (Dan Nesher)]

Hi @alessandra ,

So I reinstalled everything - now I don’t get any error message, but I also don’t seem to get my URL…

Terminal output:

PS D:\dnesh\Documents\Monday\quickstart-react> npm start

monday-integration-quickstart-app@0.0.1 start
npm run stop && concurrently “npm run server” “npm run expose”

monday-integration-quickstart-app@0.0.1 stop
kill-port 8301 && kill-port 4049 && kill-port 4040

0 process was killed
0 process was killed
0 process was killed
[0]
[0] > monday-integration-quickstart-app@0.0.1 server
[0] > react-scripts start
[0]
[1]
[1] > monday-integration-quickstart-app@0.0.1 expose
[1] > mtunnel -p 8301
[1]
[1] [22:38:18.098] INFO: your url is: https://old-fashioned-centipede-27.tunnel.monday.app
[0] (node:16372) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: ‘onAfterSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.
[0] (Use node --trace-deprecation ... to show where the warning was created)
[0] (node:16372) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.
[0] Starting the development server…
[0]
[0] Compiled successfully!
[0]
[0] You can now view monday-integration-quickstart-app in the browser.
[0]
[0] Local: http://localhost:8301
[0] On Your Network: http://192.168.68.118:8301
[0]
[0] Note that the development build is not optimized.
[0] To create a production build, use npm run build.
[0]
[0] webpack compiled successfully

Status page (http://localhost:8301/status):

Did I miss anything?
What can I find the ngrok URL?

Thanks!

[alessandra]

Hi @dnesh,

We’re investigating this issue but we suspect it has to do with using a VPN when running the start commands. Could you confirm whether you’re using a VPN?

Thanks!

[dnesh (Dan Nesher)]

Hi @alessandra ,
Thanks for the update.

In the meantime, I was able to complete the exercise by pointing the app to the local host URL instead of the illusive ngrok .

[Matias.Monday (Matias)]

Hello @dnesh!

Thank you for keeping us informed.

Just to check here, are you using a VPN?

Cheers,
Matias

[dnesh (Dan Nesher)]

Hi @Matias,

Nope, I was not using any VPN.

Dan

[Matias.Monday (Matias)]

Thank you for the confirmation @dnesh!

It will help with our investigation

[alessandra]

Hi @dnesh!

We’re in the process of moving from using ngrok to our new mondaytunnel, which is currently live. It looks like we missed the URL when you first shared your error with us! we’re working on fixing the output messages to make the URL more visible. You should be able to run the start command and see a URL in the output that ends in tunnel.monday.app.

Let us know if you run into any issues!

[hyderhafiz]

Hi @alessandra @Matias.Monday
I have a similar problem. I get a similar url like dnesh but when I paste the url in the custom url like it was said in the quickstart guide section, nothing comes up and after a bit i get a 504 gateway timeout. Do you know the reason for this? I new to this field so I dont have a clue what to do next.

Thanks,
Hyder

[Matias.Monday (Matias)]

Hello @hyderhafiz!

Can you please send a screen recording to appsupport@monday.com so that our technical team can take a closer look?

Please include in the screen recording the steps you are taking, your script and the issue you are seeing.

Cheers,
Matias

[Islam.Shaheen (Islam)]

Hello,
I am facing the same issue, any updates?

[Matias.Monday (Matias)]

Hello @Islam.Shaheen,

In this case, you should check your environment (firewall, antivirus, VPN, etc.) since the issue is likely to be somewhere there.

If none of that works, please send an email to appsupport@monday.com so we can take a closer look from there.

Cheers,
Matias

[vchan (Victor)]

Hello Matias,

I’m having the exact same error as Hyder and I am not using any firewall, vpn or antivirus (other than Windows Defender). Is ther any follow up or solution to Hyder’s issue? Thank you.

[Matias.Monday (Matias)]

Hello there @vchan and welcome to the community!

We will need you to please send an email to appsupport@monday.com so we can take a look into your particular case.

Please send all the information you have. Screenshots and screen recordings are very welcomed.

See you over there!

Cheers,
Matias

[shawn]

It’s the Node version. Had the same issue, changed from v18 to v16 and connected with no problem.

[Matias.Monday (Matias)]

Thank you @shawn for sharing your experience!

And welcome to the community

[Avenewera]

So, from what I gather, a few of you are hitting snags with the Quickstart React example. Here’s a hack I stumbled upon that might help: make sure your npm is up-to-date and try running the setup commands in your terminal as an administrator. Sometimes, it’s those little permissions gremlins causing all the chaos!

[Matias.Monday (Matias)]

Thank you @Avenewera for sharing and welcome to the community!