github/wails
5
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-02 05:11:29 +08:00
Code Projects Activity

Create-React-App documentation updates (#2805)

Browse Source 
* Add documentation for running a create-react-app project in watch mode

* Fix build warning
This commit is contained in:
Andreas Christou 2023-08-01 23:58:05 +01:00 committed by GitHub
parent a96d51be02
commit 027edad51b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
website/docs/guides/application-development.mdx
View File

@ -219,8 +219,33 @@ be saved to your project config and become the default.
Some frameworks come with their own live-reloading server, however they will not be able to take advantage of the Wails
Go bindings. In this scenario, it is best to run a watcher script that rebuilds the project into the build directory, which
Wails will be watching. For an example, see the default svelte template that uses [rollup](https://rollupjs.org/guide/en/).
For [create-react-app](https://create-react-app.dev/), it's possible to use
[this script](https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd) to achieve a similar result.
### Create React App
The process for a Create-React-App project is slightly more complicated. In order to support live frontend reloading the following configuration
needs to be added to your `wails.json`:
```json
"frontend:dev:watcher": "yarn start",
"frontend:dev:serverUrl": "http://localhost:3000",
```
The `frontend:dev:watcher` command will start the Create-React-App development server (hosted on port `3000` typically). The `frontend:dev:serverUrl` command then
instructs Wails to serve assets from the development server when loading the frontend rather than from the build folder. In addition to the above, the
`index.html` needs to be updated with the following:
```html
<head>
<meta name="wails-options" content="noautoinject" />
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
</head>
```
This is required as the watcher command that rebuilds the frontend prevents Wails from injecting the required scripts. This circumvents that issue by ensuring
the scripts are always injected. With this configuration, `wails dev` can be run which will appropriately build the frontend and backend with hot-reloading enabled.
Additionally, when accessing the application from a browser the React developer tools can now be used on a non-minified version of the application for straightforward
debugging. Finally, for faster builds, `wails dev -s` can be run to skip the default building of the frontend by Wails as this is an unnecessary step.
## Go Module

2
website/docs/guides/sveltekit.mdx
View File

@ -93,7 +93,7 @@ wails dev
##### The Wails runtime unloads with full page navigations!
- Anything that causes full page navigations: `window.location.href = '/<some>/<page>'` or Context menu reload when using wails dev. What this means is that you can end up losing the ability to call any runtime breaking the app. There are two ways to work around this.
- Use `import { goto } from '$app/navigation'` then call `goto('/<some>/<page>')` in your +page.svelte. This will prevent a full page navigation.
- If full page navigation can't be prevented the Wails runtime can be added to all pages by adding the below into the <head> of myapp/frontend/src/app.html
- If full page navigation can't be prevented the Wails runtime can be added to all pages by adding the below into the `<head>` of myapp/frontend/src/app.html
```
<head>
...

29
website/versioned_docs/version-v2.4.0/guides/application-development.mdx
View File

@ -219,8 +219,33 @@ be saved to your project config and become the default.
Some frameworks come with their own live-reloading server, however they will not be able to take advantage of the Wails
Go bindings. In this scenario, it is best to run a watcher script that rebuilds the project into the build directory, which
Wails will be watching. For an example, see the default svelte template that uses [rollup](https://rollupjs.org/guide/en/).
For [create-react-app](https://create-react-app.dev/), it's possible to use
[this script](https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd) to achieve a similar result.
### Create React App
The process for a Create-React-App project is slightly more complicated. In order to support live frontend reloading the following configuration
needs to be added to your `wails.json`:
```json
"frontend:dev:watcher": "yarn start",
"frontend:dev:serverUrl": "http://localhost:3000",
```
The `frontend:dev:watcher` command will start the Create-React-App development server (hosted on port `3000` typically). The `frontend:dev:serverUrl` command then
instructs Wails to serve assets from the development server when loading the frontend rather than from the build folder. In addition to the above, the
`index.html` needs to be updated with the following:
```html
<head>
<meta name="wails-options" content="noautoinject" />
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
</head>
```
This is required as the watcher command that rebuilds the frontend prevents Wails from injecting the required scripts. This circumvents that issue by ensuring
the scripts are always injected. With this configuration, `wails dev` can be run which will appropriately build the frontend and backend with hot-reloading enabled.
Additionally, when accessing the application from a browser the React developer tools can now be used on a non-minified version of the application for straightforward
debugging. Finally, for faster builds, `wails dev -s` can be run to skip the default building of the frontend by Wails as this is an unnecessary step.
## Go Module

29
website/versioned_docs/version-v2.5.0/guides/application-development.mdx
View File

@ -219,8 +219,33 @@ be saved to your project config and become the default.
Some frameworks come with their own live-reloading server, however they will not be able to take advantage of the Wails
Go bindings. In this scenario, it is best to run a watcher script that rebuilds the project into the build directory, which
Wails will be watching. For an example, see the default svelte template that uses [rollup](https://rollupjs.org/guide/en/).
For [create-react-app](https://create-react-app.dev/), it's possible to use
[this script](https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd) to achieve a similar result.
### Create React App
The process for a Create-React-App project is slightly more complicated. In order to support live frontend reloading the following configuration
needs to be added to your `wails.json`:
```json
"frontend:dev:watcher": "yarn start",
"frontend:dev:serverUrl": "http://localhost:3000",
```
The `frontend:dev:watcher` command will start the Create-React-App development server (hosted on port `3000` typically). The `frontend:dev:serverUrl` command then
instructs Wails to serve assets from the development server when loading the frontend rather than from the build folder. In addition to the above, the
`index.html` needs to be updated with the following:
```html
<head>
<meta name="wails-options" content="noautoinject" />
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
</head>
```
This is required as the watcher command that rebuilds the frontend prevents Wails from injecting the required scripts. This circumvents that issue by ensuring
the scripts are always injected. With this configuration, `wails dev` can be run which will appropriately build the frontend and backend with hot-reloading enabled.
Additionally, when accessing the application from a browser the React developer tools can now be used on a non-minified version of the application for straightforward
debugging. Finally, for faster builds, `wails dev -s` can be run to skip the default building of the frontend by Wails as this is an unnecessary step.
## Go Module