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

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:
welcome-apps/apps/quickstart-react at master · mondaycom/welcome-apps · GitHub

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:
Screenshot 2022-10-04 004018

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

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!

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

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):
image

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

Thanks!

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!

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 .

Hello @dnesh!

Thank you for keeping us informed.

Just to check here, are you using a VPN?

Cheers,
Matias

Hi @Matias,

Nope, I was not using any VPN.

Dan

Thank you for the confirmation @dnesh!

It will help with our investigation :slightly_smiling_face:

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!

1 Like

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

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