So I'm developing a chrome extension with React. Everything works fine, but every time a change is made, I have to rebuild the extension with:
npm run build
...and then go back into my browser and load the extension with the build. This works fine, as aforementioned, but it's time consuming, and I feel that there's a better way.
I can't test in-browser because I'm using Chrome APIs (storage sync, etc.)
Is there any other way to test? Or do I have to build every time?
Use rollup-plugin-chrome-extension.
npm init vite#latest
npm i rollup-plugin-chrome-extension#beta -D
Update these files
// vite.config.js
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import { chromeExtension } from "rollup-plugin-chrome-extension";
import manifest from './manifest.json'
export default defineConfig({
plugins: [react(), chromeExtension({ manifest })],
});
// manifest.json
{
"manifest_version": 3,
"name": "Rpce React Vite Example",
"version": "1.0.0",
"action": { "default_popup": "index.html" }
}
Then run npm run dev
Go to chrome://extensions in your browser and drag the dist folder from your project into the window. Start developing with hot reloading.
Related
I'v already migrated from webpack to vite and used vite pwa plugin to register a service worker.
My problem is that when I try to use a custom path for service worker, Vite will work fine in production, but in development cause 404 error.
here is my VitePwa vite.config.js:
VitePWA({
srcDir: 'src',
filename: 'sw.js',
devOptions: {
enabled: true,
},
strategies: 'injectManifest',
injectManifest: {
injectionPoint: undefined
}
}),
I already got that, in the development environment, vite pwa plugin is looking for sw.js in the public directory but I want it to get it from src
I got the solution
First, setting type as module is needed in vitePwaPlugin config in devOptions:
devOptions: {
enabled: true,
type: 'module',
},
and vitePwaPlugin will try to install dev-sw.js?dev-sw file as service worker
Second, for handling registeration I used registerSW from virtual:pwa-register
import { registerSW } from 'virtual:pwa-register';
if ('serviceWorker' in navigator) {
registerSW();
}
Module not found: Error: Can't resolve 'process/browser' in '/Users/nigelng/oxpay-merchant-portal-fe/node_modules/xlsx'
Did you mean 'browser.js'?
I have installed xlsx 0.18.5 npm package to export xlsx files, I found out that's a webpack issue (https://github.com/SheetJS/sheetjs/issues/2527), but the solutions didn't work for me.
do anyone experience the same error?
The way I fixed this was by using the package #craco/craco so you can manually change the webpack config file without ejecting create-react-app (since that is permanent). Once craco is installed create a file in the root directory named craco.config.js and then copy and paste this configuration, should fix your problem:
const webpack = require("webpack");
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
}
}
};
Make sure to change your start script to "craco start" and you should be off to the races.
I'm using Vite latest version then checkout to branch which using older version. When I back to the branch where using latest version this issue happened although the app able to running.
This is my vite.config.ts
import * as path from "path"
import react from "#vitejs/plugin-react"
import { defineConfig } from "vite"
// https://vitejs.dev/config/
export default defineConfig({
build: {
sourcemap: true
},
plugins: [react()],
resolve: {
alias: {
"#": path.resolve(__dirname, "./src")
}
}
})
remove node_modules, pnpm-lock.yaml and reinstall dependencies works for me
The solution to turn on resolve.preserveSymlinks works for me. Please also refer to vite config.
As a toy project, I created a react web app with create-react-app. I then changed "serviceworker.unregister()" to "serviceworker.register()" in index.js. The toy project is on Github here: https://github.com/verybadcat/CreateReactAppPwa. I then tried Google's lighthouse audits via two different ways of launching the app.
If I launched it with "npm start", lighthouse was unhappy about several things. The three that interest me at the moment are the following:
Current page does not respond with a 200 when offline
start_url does not respond with a 200 when offline
Does not register a service worker that controls page and start_url
It also complained that I wasn't using https. I want to put that aside for now.
On the other hand, if I launched it via "npm run build" and copied the url from that command into my browser, lighthouse complained about https only.
Now for the real project. The real project is a netcoreapp3.0 react app. At the moment, it is essentially Microsoft's template project. It has a file index.js which looks like this:
import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');
ReactDOM.render(
<BrowserRouter basename={baseUrl}>
<App />
</BrowserRouter>,
rootElement);
// Uncomment the line above that imports the registerServiceWorker function
// and the line below to register the generated service worker.
// By default create-react-app includes a service worker to improve the
// performance of the application by caching static assets. This service
// worker can interfere with the Identity UI, so it is
// disabled by default when Identity is being used.
//
registerServiceWorker();
The registerServiceWorker call that I uncommented goes to a file from the default project that looks like this:
export default function register () {
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);
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/facebookincubator/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. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl);
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl);
}
});
}
}```
The problem is that in every case I've tried, the behavior is the same as the "debug" version of the toy app. This includes both a debug and a release build of the project. Lighthouse does not appear to see the service worker. I see two things that I can speculate might be the problem, but I really don't know:
I'm doing everything on localhost. The register file has a check for localhost and different behavior if we are on localhost.
The folder structure is different from the toy app. In the toy app, index.js and index.html are in the same folder. In the real app, index.js is in a folder "src" while index.html is in a folder "public". Both "src" and "public" are children of the same parent. BUT it's not clear how this might be changed as I remember seeing a doc that index.js should have that exact filename and path, and if I try to import something outside of the folder, I get an error saying that imports outside of the folder are not supported.
With Firebase Hosting, when you deploy an app you are asked whether to rewrite all urls to /index.html. This means react-router routes would be properly fired whether they are accessed directly or navigated to from the homepage.
We use Create-react-app and Create-react-app-buildpack to deploy to Heroku. How can we rewrite all the URLs to /index.html in the same manner?
Following this issue, explaining about the routes directive, I configured a static.json in the root to no avail:
{
"routes": {
"/images/*": "/images/",
"/legal/*": "/images/",
"/media/*": "/media/",
"/fav/*": "/fav/",
"/styles/*": "/styles/",
"/**": "index.html"
}
}
Create a static.json file in the project root with the following content:
{
"root": "build/",
"routes": {
"/**": "index.html"
}
}
More here.