how to make webpack / react and electron work in secure context? - reactjs

I have looked at tons of various posts but barely could find on how to make webpack work with electron in secure way.
A lot of devs suggest to enable nodeIntegrations and disable contextIsolation.
But this can lead to security flaws? electron security
I have used electron forge to build the project skeleton. I can run the electron app in dev mode. But when I try to package it
I get Uncaught ReferenceError: require is not defined
How can this issue be solved without enabling nodeIntegrations and not disabling contextIsolation.
Any help would be appreciated.

The project I had was built with electron forge.
I run in various different issues.
For me what fixed all issues was upgrading all packages with yarn upgrade.
Now the electron app created executable without issue and contextIsolation works as well.
If someone experience similar issue try to upgrade the packages.

Related

Using Expo React Native in Monorepo without Yarn

I have been trying to setup a monorepo using turborepo. I want to have a Nextjs application along with a React Native application (using Expo).
I have come as far as getting everything to work using yarn and it's no-hoist options as well as expo-yarn-workspaces. You can see my repo here: https://github.com/juliusmarminge/turbo-expo-next-starter. This is my first monorepo so not sure if it follows conventions by any means.
The issue I'm getting into is I don't want to be forced to use Yarn, especially since pnpm is getting more popular and I use it for most my other projects. Has anyone any experience in using Expo in a monorepo without using Yarn? Feels like all examples online is using it...
Thanks in advance,
Julius
You can use it with pnpm AND get-workspaces (from yarn) to update your metro.config.js and to resolve node_modules.

How to fix React Webpack-Dev-server complaint regarding bundle size?

Thank you for taking the time to read and possibly help with this issue. I am building a boilerplate react/express full-stack application. I have managed to get it going, however, I cannot fix this issue regarding webpack-dev-server complaining about the bundle size. This is currently a barebone application, and I am afraid that it will only get larger.
https://github.com/ducvtrann/pern-boilerplate - npm run start-dev to boot the app up
Thank you all!
Best,
Duc
Change webpack mode from production to development and warnings will be gone.

React + Electron + react-hot-loader + react-router + webpack-dev-server

Description
Please, I'm desperate. For the last 3 days, I've been trying without luck to implement react-hot-loader within an electron app and don't know what else to try. I'm following many comments, posts, issues trying to replicate what they did but none gives me enough information about the entire setup so I can find what I'm missing. I've already tried electron-webpack but it didn't work for me. It has HMR from webpack, but no react-hot-loader and that makes applications using react-router a pain to work with. Maybe it's not possible, but people seem to have achieved it so I'm not willing to give up.
Expected behavior
Project setup with electron, webpack, webpack-dev-server, react, react-router, react-hot-loader. I want to be able to change CSS and HTML strings without having to rebuild the entire project with webpack and restart it.
Actual behavior
Looking for the right styles in a component accessed through react-router links takes forever. Can't keep doing this. I've been using the dev tools for that purpose but it's not even close to the speed achievable by trying things in an IDE.
Environment
Deps:
electron 4.2.10
webpack-cli 3.3.7
webpack-dev-server 3.8.0
webpack 4.39.3
react-hot-loader 4.12.12
react-router-dom 5.0.1,
System:
OS Ubuntu 18.04 LTS
node 10.16.2
npm 6.9.0
yarn 1.7.3
Reproducible Demo
This is the project I'm trying to set it up for https://github.com/nahuelarjonadev/kafka-lens/, but I'm ultimately looking for just a super simple working demo so I can mirror the configurations or at least get a hint on how to do it. I couldn't find one yet.
Use the webpack react electron boilerplate and add on it the react-hot-reloader or whatever else you want to add, i am sure that will probably work, is a good starting point for sure.
https://github.com/electron-react-boilerplate/electron-react-boilerplate

Remove expo from react native

I've had so many troubles with the tool, I seriously have been debugging expo morethan the app itself.
How might I remove expo completely from CRNA? I would like to use CRNA and it's debugging tools without expo
You can do it by ejecting your app running npm run eject
Then, if you have any reference to expo just remove all of them.
your app modules before being ejected looks like this below:
When you run npm run eject it will ask some questions like:
be sure to select React Native: I'd like a regular react Native project
And your folders will now look like this (no expo):
Just be careful because ejecting is a permanent process, you should make a backup of your files.
Once you eject from Expo, though, and if you're using a Windows computer, you'll only be able to develop for Android, I believe. You'll still need a Mac to work in React Native without Expo. I'm a beginner but just wanted to highlight this difficulty faced by Windows users when ejecting from Expo.

What does "ejecting CRNA app is not reversible" really mean?

I've read some docs that says that ejecting a Create React Native App (CRNA) is irreversible. Im not sure what this means exactly.
Will I not be able to build my apps again for App Store, Play Store? Is it just a 1-time feature?
Will I lose files/ code that prevents me from ejecting a second time?
I'm trying to dig a little deeper into this. If anybody could share links to relevant blogs or forums, that would be great.
Ejecting is irreversible in the sense that if you modify the ejected project, you cannot convert it back into a CRNA project (except by creating a new CRNA project and copy/pasting all your code)
You can build for the App Store/Play store from a CRNA or an ejected project. For CRNA you would usually use exp:build and for ejected apps you could build from XCode. If you're only ejecting to get a standalone app, don't do it! Check out Expo's building standalone apps.
If you're worried about ejecting and losing you're original CRNA project, I recommend duplicating it before ejecting.
There's no reason to eject more than once. If you've ejected you can continue working on the ejected project.

Resources