Vue frontend blank display

[SyberSin]

Following ignite tutorial and vue frontend shows blank page. Fresh install of ignite and npm 16.

Steps: ignite chain serve cd vue npm install npm run serve

output:

@starport/[email protected] serve vite preview

Local: http://localhost:5000/ Network: use --host to expose

When navigating to localhost:5000, the page is blank. When navigating to localhost:8080 the page fails to open and cannot connect to localhost.

Also tried these steps: npm run build npm run dev

I still get a blank page at localhost:3000 but the favicon is showing up.

[jeronimoalbi]

It is working for me following these steps:

• ignite scaffold chain github.com/username/hello
• ignite chain serve
• cd vue
• npm install
• npm run dev
• open http://localhost:3000/

Using npm version 8.5.5.

Build info:

Ignite CLI version:	development
Ignite CLI build date:	2022-05-18T17:06:18
Ignite CLI source hash:	29df48a07791836711bee4ef020220288e49f84a
Your OS:		darwin
Your arch:		arm64
Your go version:	go version go1.18.1 darwin/arm64
Your uname -a:		Darwin MacBook-Pro.home 21.4.0 Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000 arm64
Your cwd:		/Users/jeronimoalbi/Projects/chains/hello
Is on Gitpod:		false

When I was trying to reproduce I had some issues running the app build as follows:

• npm run build
• npm run serve
• open http://localhost:5000/

The app worked in Firefox but it didn't work in Brave where I got an HTTP 403, maybe because of a C.O.R.S. related issue when running the build locally.

[SyberSin]

I can confirm the issue was safari. Safari is giving me the following error:

SyntaxError: Invalid regular expression: invalid group specifier name
promiseReactionJob

No indication of what line or file the error is originating.

Downloaded Chrome and now front end is working but only with npm run dev. npn run serve is giving me the same HTTP 403 error on chrome.

The cosmos tutorial on ignite says to use npm run serve. This will not work at all with any browser, you need to use npm run dev (which will not work with safari). This is not a good user experience when the first part of the tutorial isn't even followable, and should be fixed or at least tutorials updated. Same incorrect information is found in the readme.

[jeronimoalbi]

Thank you @SteveDaMonsta 👍 , I will inform about this issue to the documentation team.

[ilgooz]

@marinhoarthur @barriebyron

[josehidalgoromero]

Port 5000 is in use in Mac OS Monterey. You can set another port for running the app. Nevertheless, it seems to raise same error in any other port when using Safari or Brave. Chrome works fine.

[jeronimoalbi]

@marinhoarthur the tutorial docs were changed so the app is run in development mode. Regarding serving a build I am not sure if there is an issue or we just need a different setup for that.

[Frederic-Zhou]

Port 5000 is in use in Mac OS Monterey. You can set another port for running the app. Nevertheless, it seems to raise same error in any other port when using Safari or Brave. Chrome works fine.

yes , Chrome works fine. Is it because safari can't check ‘Keplr’ plugin status？

[clockworkgr]

Latest templates (both vue and react) work fine in Chrome/Firefox.

I do not own a Mac to test safari.

However the template is built to work with Keplr and Keplr is only available on chrome and firefox so not sure how it working in safari would help

[salmad3]

Closing as stale, please reopen if otherwise.