I would like to try PWA with create react app version 4.0, i did manage to generate new project as below
npx create-react-app my-app --template cra-template-pwa-typescript
When i try to run npm start i don't see any service-worker.js registered in chrome browser but if i build and serve then it works fine. I would like to register service-worker.js in dev mode, so i followed this article Easy Workbox Integration with create-react-app I have removed the production environment check in serviceWorkerRegistration.ts but no luck.
serviceWorkerRegistration.ts
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator)
Please advise ?
The service worker is only enabled in the production environment, e.g. the output of npm run build. It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally.
from here: https://create-react-app.dev/docs/making-a-progressive-web-app/
Related
I'm trying to develop a Hubspot's Click to Call app to use by my PBX.
I've already studied the Calling Extension SDK guide and made a simple poc that works into my localhost by npm (npm start).
Now I'm trying to move into production test evinroment so, into remote server, I've basic copyed the project files and binded it by Hubspot App registration.
Unfortunatelly, when I run the app on my Hubspot TestAccount, I see (in the browser console) that it requires a "./bin/index_combined.js" file. It isn't into my npm directory and npm compiles it for me only when I run "npm start" command...(local scenario).
So how to use my Click2Call app by remote without npm ? or how to produce an index_combined.js good for remote scenario?
i'm new to node js, vuejs AND nuxtjs in the same times. I'm currently developping an application and my server is full. It seem that when i'm runing npm run build locally and just uploading .nuxt folder it's working well. am i doing this well ?
For deploying you application there different steps available in the official docs. Here is the available options in nuxt.
Also check this commands and deployments for nuxtjs.
Server Deployment
To deploy a SSR application we use target: 'server', where server is the default value.
npm run build
Nuxt will create a .nuxt directory with everything inside ready to be deployed on your server hosting.
Once your application is built you can use the start command to see a production version of your application.
npm run start
Static Deployment (Pre-rendered)
Nuxt gives you the ability to host your web application on any static hosting.
To deploy a static generated site make sure you have target: 'static' in your nuxt.config.js (for Nuxt >= 2.13):
// nuxt.config.js
export default {
target: 'static'
}
npm run generate
Nuxt will create a dist/ directory with everything inside ready to be deployed on a static hosting service.
I recently started react-native, after installing all dependencies i tried starting my project but when it starts i don"t seem to find the QR code scanner for me to scan with my device anywhere, instead it starts in the browser, it says
web Starting Webpack on port 19006 in development mode.
Expo Webpack █████████████████████████ building (40%) 194/196 modules 2 active
node_modules\invariant\browser.js
i ｢wds｣: Project is running at http://0.0.0.0:19006/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\user\AppData\Roaming\npm\node_modules\expo-cli\node_modules#expo\webpack-config\web-default
i ｢wds｣: 404s will fallback to /
. I want expo to run on my device not the browser.
Try
Deleting all the metro packages from project_root/node_modules.
Run npm install in project_root.
Now run expo start again and it should work.
This seems to help in most cases
In your app.json you can set wich platforms you want, like this
"platforms": [
"android",
"ios"
]
The problem is :
When you use react-native-web, Metro uses webpack to pack your code to be
available for web.
Something is wrong with the installation (a bug maybe) so metro
cannot pack for running the code on a simulator or on a device.
The simptom is you cannot see the QR Code when npm start wright ?
The Solution : Customize webpack https://docs.expo.io/guides/customizing-webpack/
This procedure creates the file webpack.config.js on the roor directory of your project.
Running the expo customize:web will create webpack.config.js
This action solves the problem. You will see the QR again and
will be able to run your app in a device, simulator and web.
I had this problem after installing some packages, and i did npm install and it worked
I'm currently developing a web application composed of:
api: an API built with Flask in Python
app: a web app built with vue-cli (based on webpack), and minified with npm run build
I've successfully built the api with an OpenShift Python S2I (source-to-image) image: python-36-rhel7.
I'd like to be able to automatically build the static web app from source and serve it through Nginx or Apache, in a separate app from the same project.
It should:
download the app source from the git repo (context-dir=/app/)
install npm
build it with npm install and npm run build
serve the built html+js+css files
There exist a node.js S2I image but it seems to be more suited for Express.js apps.
What would be the best way to build and serve a minified static web app on OpenShift?
Create-react-app v2 uses the workbox cacheFirst strategy. I want to use staleWhileRevalidate. How can I create a custom service worker and add it too a exising app?
Please update to create-react-app v4 if you'd like more control over your service worker.
You can start a new project that will use a service worker that you can make changes to using:
npx create-react-app my-app --template cra-template-pwa
There are details in the current documentation.