From f312370f73205c73099d9e8e78e5a24a4503dcd0 Mon Sep 17 00:00:00 2001 From: Merbin J Anselm Date: Sat, 17 Apr 2021 16:00:06 +0530 Subject: [PATCH] migrated to snowpack from create-react-app --- web/package.json | 12 ++-- web/public/index.html | 1 + web/snowpack.config.js | 43 +++++++++++++ web/src/index.jsx | 2 +- web/src/serviceWorker.js | 135 --------------------------------------- 5 files changed, 51 insertions(+), 142 deletions(-) create mode 100644 web/snowpack.config.js delete mode 100644 web/src/serviceWorker.js diff --git a/web/package.json b/web/package.json index 9297018..cb5ad01 100644 --- a/web/package.json +++ b/web/package.json @@ -10,18 +10,18 @@ "axios-hooks": "^1.9.0", "graphql": "^14.6.0", "graphql-tag": "^2.10.3", + "http-proxy": "^1.18.1", "react": "^16.12.0", "react-dom": "^16.12.0", - "react-helmet": "latest", - "react-scripts": "latest", + "react-helmet": "^6.1.0", + "snowpack": "^3.3.3", "subscriptions-transport-ws": "^0.9.16", "urql": "^1.9.0" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "start": "snowpack dev", + "build": "snowpack build", + "test": "echo \"No tests to run :(\" && exit 1" }, "eslintConfig": { "extends": "react-app" diff --git a/web/public/index.html b/web/public/index.html index aaad7c5..e93d9f0 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -38,6 +38,7 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + \ No newline at end of file diff --git a/web/snowpack.config.js b/web/snowpack.config.js new file mode 100644 index 0000000..f1c7213 --- /dev/null +++ b/web/snowpack.config.js @@ -0,0 +1,43 @@ +/** @type {import("snowpack").SnowpackUserConfig } */ + +const httpProxy = require("http-proxy"); +const proxy = httpProxy.createServer({ target: "http://localhost:3000" }); + +module.exports = { + env: { + REACT_APP_WEBSOCKET_ENDPOINT: "ws://localhost:8080/query", + }, + mount: { + public: "/", + src: "/dist", + }, + plugins: [ + /* ... */ + ], + routes: [ + { + src: "/query.*", + dest: (req, res) => { + proxy.web(req, res); + }, + upgrade: (req, socket, head) => { + proxy.ws(req, socket); + }, + }, + /* Enable an SPA Fallback in development: */ + { match: "routes", src: ".*", dest: "/index.html" }, + ], + optimize: { + /* Example: Bundle your final build: */ + // "bundle": true, + }, + packageOptions: { + /* ... */ + }, + devOptions: { + /* ... */ + }, + buildOptions: { + /* ... */ + }, +}; diff --git a/web/src/index.jsx b/web/src/index.jsx index 9d1c2b5..c0079f6 100644 --- a/web/src/index.jsx +++ b/web/src/index.jsx @@ -5,7 +5,7 @@ import { Provider as UrqlProvider, createClient, defaultExchanges, subscriptionE import { SubscriptionClient } from 'subscriptions-transport-ws'; const subscriptionClient = new SubscriptionClient( - process.env.REACT_APP_WEBSOCKET_ENDPOINT, + import.meta.env.REACT_APP_WEBSOCKET_ENDPOINT, {} ); const gqlclient = createClient({ diff --git a/web/src/serviceWorker.js b/web/src/serviceWorker.js deleted file mode 100644 index f8c7e50..0000000 --- a/web/src/serviceWorker.js +++ /dev/null @@ -1,135 +0,0 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA - -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. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl, config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } -}