wails: Cannot start wails + create-react-app

Description I really don’t know if this is a bug or simply wails does not supports react

To Reproduce Steps to reproduce the behaviour:

  1. Init a wails project
  2. Create a react app in the frontend folder
  3. Add frontend build as assetdir in wails.json
  4. Add npm install as frontend:install
  5. Add npm run build as frontend:dev/frontend:build
  6. Execute wails dev and wait or wails build an open the application

Expected behaviour A correct opening of the application

Screenshots If applicable, add screenshots to help explain your problem.

System Details (running wails doctor) System

OS: MacOS Version: 11.6 ID: 199506 Go Version: go1.17.2 Platform: darwin Architecture: amd64

Additional context This is what I get when running wails dev (I see the same error when starting the application after wails build

Executing: go mod tidy
Executing: wails generate module
Running frontend dev command: 'npm run build'
Building application for development...
Installing frontend dependencies: Done.
Compiling frontend: 
> frontend@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.33 KB  build/static/js/2.c2ca528f.chunk.js
  1.62 KB   build/static/js/3.1ef4b814.chunk.js
  1.16 KB   build/static/js/runtime-main.ff5ca5cf.js
  588 B     build/static/js/main.044cc9db.chunk.js
  531 B     build/static/css/main.8c8b27cf.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Done.
Compiling application: Dev command exited!
Done.

DEB | [DesktopAssetServer] Loading assets from: %PROJECTPATH%/frontend/build
panic: runtime error: index out of range [0] with length 0

goroutine 1 [running, locked to thread]:
github.com/wailsapp/wails/v2/internal/frontend/assetserver.PathToIndexHTML({0xc000307ce0})
        %USERPATH%/go/pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.19/internal/frontend/assetserver/assetserver_desktop.go:84 +0x156
github.com/wailsapp/wails/v2/internal/frontend/assetserver.processAssets({0xc000307ce0})
        %USERPATH%/go/pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.19/internal/frontend/assetserver/assetserver_desktop.go:95 +0x39
github.com/wailsapp/wails/v2/internal/frontend/assetserver.(*DesktopAssetServer).init(...)
        %USERPATH%/go/pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.19/internal/frontend/assetserver/assetserver_desktop.go:105
github.com/wailsapp/wails/v2/internal/frontend/assetserver.NewDesktopAssetServer({0x4567200, 0xc0001eb9b0}, {0x4558c80}, {0xc000310000, 0x6f})
        %USERPATH%/go/pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.19/internal/frontend/assetserver/assetserver_desktop.go:47 +0x2d2
github.com/wailsapp/wails/v2/internal/frontend/desktop/darwin.NewFrontend({0x4567200, 0xc0001eb9b0}, 0xc0001ce0c0, 0xc0000bcb10, 0xc0000ce500, {0x455e160, 0xc0001eb9e0})
        %USERPATH%/go/pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.19/internal/frontend/desktop/darwin/frontend.go:84 +0x1cb
github.com/wailsapp/wails/v2/internal/frontend/desktop.NewFrontend(...)
        %USERPATH%/go/pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.19/internal/frontend/desktop/desktop_darwin.go:18
github.com/wailsapp/wails/v2/internal/appng.CreateApp(0xc0001ce0c0)
        %USERPATH%/go/pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.19/internal/appng/app_dev.go:118 +0x6cb
github.com/wailsapp/wails/v2.Run(0xc0000001a0)
        %USERPATH%/go/pkg/mod/github.com/wailsapp/wails/v2@v2.0.0-beta.19/wails.go:19 +0x19
main.main()
        %USERPATH%/Documents/golang/provoon/main.go:26 +0x385
Watching (sub)/directory: %USERPATH%/Documents/golang/provoon
Using Dev Server URL: http://localhost:34115
Using reload debounce setting of 100 milliseconds
^C
Caught quit
Development mode exited

If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony

Thanks in advance for your help, I really appreciate your work and love this project. I’ll surely make a react template after this issue has been solved

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 41 (33 by maintainers)

Most upvoted comments

You can always opens browser to localhost:34115 see the scripts injected in the head of index.HTML then have them in your react HTML 😃

I see, thats what i figured, and what i tried intiially but my react dev server could never propertly inject the bindings. I tried a few things but maybe i was looking at the wrong things.

If perhaps you can give me a specific example I can try again I’d be happy to help.

Where did you read that events are accessed like that? Maybe the docs aren’t clear? https://wails.io/docs/reference/runtime/intro for frontend: window.runtime.EventsOn()

@leaanthony changing //go:embed frontend/src to //go:embed frontend/build solved my issue, frontend and backend seems communicating perfectly, will push and example to our repo so you can retrieve a template from it