diff --git a/cmd/templates/create-react-app/frontend/package.json.template b/cmd/templates/create-react-app/frontend/package.json.template index 7422b0010..8cd6ded3b 100644 --- a/cmd/templates/create-react-app/frontend/package.json.template +++ b/cmd/templates/create-react-app/frontend/package.json.template @@ -5,8 +5,8 @@ "private": true, "dependencies": { "core-js": "^3.6.4", - "react": "^16.13.0", - "react-dom": "^16.13.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", "wails-react-scripts": "3.0.1-2", "react-modal": "3.11.2", "@wailsapp/runtime": "^1.0.10" diff --git a/cmd/templates/create-react-app/frontend/public/favicon.ico b/cmd/templates/create-react-app/frontend/public/favicon.ico index a11777cc4..bcd5dfd67 100644 Binary files a/cmd/templates/create-react-app/frontend/public/favicon.ico and b/cmd/templates/create-react-app/frontend/public/favicon.ico differ diff --git a/cmd/templates/create-react-app/frontend/public/index.html b/cmd/templates/create-react-app/frontend/public/index.html index 278c96295..4bf3c2570 100644 --- a/cmd/templates/create-react-app/frontend/public/index.html +++ b/cmd/templates/create-react-app/frontend/public/index.html @@ -1,10 +1,13 @@ - + + - + + + React App - - + + +
- - + + + \ No newline at end of file diff --git a/cmd/templates/create-react-app/frontend/public/logo192.png b/cmd/templates/create-react-app/frontend/public/logo192.png new file mode 100644 index 000000000..c11e5883f Binary files /dev/null and b/cmd/templates/create-react-app/frontend/public/logo192.png differ diff --git a/cmd/templates/create-react-app/frontend/public/logo512.png b/cmd/templates/create-react-app/frontend/public/logo512.png new file mode 100644 index 000000000..564d5c188 Binary files /dev/null and b/cmd/templates/create-react-app/frontend/public/logo512.png differ diff --git a/cmd/templates/create-react-app/frontend/public/manifest.json b/cmd/templates/create-react-app/frontend/public/manifest.json index 1f2f141fa..080d6c77a 100644 --- a/cmd/templates/create-react-app/frontend/public/manifest.json +++ b/cmd/templates/create-react-app/frontend/public/manifest.json @@ -6,6 +6,16 @@ "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" } ], "start_url": ".", diff --git a/cmd/templates/create-react-app/frontend/public/robots.txt b/cmd/templates/create-react-app/frontend/public/robots.txt new file mode 100644 index 000000000..e9e57dc4d --- /dev/null +++ b/cmd/templates/create-react-app/frontend/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/cmd/templates/create-react-app/frontend/src/App.css b/cmd/templates/create-react-app/frontend/src/App.css index b41d297ca..74b5e0534 100644 --- a/cmd/templates/create-react-app/frontend/src/App.css +++ b/cmd/templates/create-react-app/frontend/src/App.css @@ -3,11 +3,16 @@ } .App-logo { - animation: App-logo-spin infinite 20s linear; height: 40vmin; pointer-events: none; } +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + .App-header { background-color: #282c34; min-height: 100vh; diff --git a/cmd/templates/create-react-app/frontend/src/components/HelloWorld.js b/cmd/templates/create-react-app/frontend/src/components/HelloWorld.js index cc6f8c84f..580dfd851 100644 --- a/cmd/templates/create-react-app/frontend/src/components/HelloWorld.js +++ b/cmd/templates/create-react-app/frontend/src/components/HelloWorld.js @@ -1,48 +1,35 @@ -import React from 'react'; +import React, { useState } from 'react'; import Modal from 'react-modal'; -class HelloWorld extends React.Component { - constructor(props, context) { - super(); - this.state = { - showModal: false - }; +function HelloWorld() { + const [showModal, setShowModal] = useState(false); + const [result, setResult] = useState(null); - this.handleOpenModal = this.handleOpenModal.bind(this); - this.handleCloseModal = this.handleCloseModal.bind(this); - } + const handleOpenModal = () => { + setShowModal(true); - handleOpenModal () { - this.setState({ showModal: true }); + window.backend.basic().then((result) => setResult(result)); + }; - window.backend.basic().then(result => - this.setState({ - result - }) - ); - } + const handleCloseModal = () => { + setShowModal(false); + }; - handleCloseModal () { - this.setState({ showModal: false }); - } - - render() { - const { result } = this.state; - return ( -
- - + return ( +
+ +

{result}

- - -
- ); - } + + +
+ ); } export default HelloWorld; diff --git a/cmd/templates/create-react-app/frontend/src/index.js b/cmd/templates/create-react-app/frontend/src/index.js index 20eec1c0c..4e64f604e 100644 --- a/cmd/templates/create-react-app/frontend/src/index.js +++ b/cmd/templates/create-react-app/frontend/src/index.js @@ -3,9 +3,20 @@ import ReactDOM from 'react-dom'; import 'core-js/stable'; import './index.css'; import App from './App'; +import * as serviceWorker from './serviceWorker'; import * as Wails from '@wailsapp/runtime'; Wails.Init(() => { - ReactDOM.render(, document.getElementById('app')); + ReactDOM.render( + + + , + document.getElementById("app") + ); }); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/cmd/templates/create-react-app/frontend/src/serviceWorker.js b/cmd/templates/create-react-app/frontend/src/serviceWorker.js index f8c7e50c2..b04b771a8 100644 --- a/cmd/templates/create-react-app/frontend/src/serviceWorker.js +++ b/cmd/templates/create-react-app/frontend/src/serviceWorker.js @@ -14,7 +14,7 @@ const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. + // 127.0.0.0/8 are considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) @@ -100,7 +100,9 @@ function registerValidSW(swUrl, config) { function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) + fetch(swUrl, { + headers: { 'Service-Worker': 'script' }, + }) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type'); @@ -128,8 +130,12 @@ function checkValidServiceWorker(swUrl, config) { export function unregister() { if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); + navigator.serviceWorker.ready + .then(registration => { + registration.unregister(); + }) + .catch(error => { + console.error(error.message); + }); } } diff --git a/cmd/templates/create-react-app/template.json b/cmd/templates/create-react-app/template.json index 4f697f1e0..57ef5d907 100755 --- a/cmd/templates/create-react-app/template.json +++ b/cmd/templates/create-react-app/template.json @@ -1,8 +1,8 @@ { "name": "React JS", "version": "1.0.0", - "shortdescription": "Create React App v3 template", - "description": "Create React App v3 standar tooling", + "shortdescription": "Create React App v4 template", + "description": "Create React App v4 standard tooling", "install": "npm install", "build": "npm run build", "author": "bh90210 ",