I’d like to use HMR with my React Electron app. How would I do that? Do I need web pack? How do I integrate it with Electron?
You use a webpack config just like you would with a normal web app.
The settings depend on wether you are using react-hot-loader 2 or 3 (beta)
You then set the src attribute in your index.html file to wherever your webpack dev server is serving the bundle from.
Usually: localhost:8080/bundlename.js
Here is the walkthrough for react-hot-loader 2:
http://gaearon.github.io/react-hot-loader/getstarted/
Related
I am working on a React project in order to build the user interface of a Nextcloud application. So far i used webpack to bundle all the code and use a single script file to inject in my Nextcloud application and it works.
The problem is the development experience, i would like to have features like auto-refresh of the page on file changes, so I am asking: Is it possibile to serve with webpack-dev-server a static url as localhost:8080 where there are my containers running nextcloud and refresh it everytime webpack detect a change?
thank you.
You might want to Hot Module Replacement.
First, install Hot Module Replacement plugin, then configure your webpack as this guide
I want to start a new app that will have both web and reactnative interfaces.
I decided to move all business -non enviroment dependent- code into a third package -aka sdk- that i can share between both react & react native .
So my project now has 4 modules
Web -- created with cra
Sdk -- mainly redux + redux saga + react containers + Hoc's
Mobile -react native
Server - nodejs express api.
All web, mobile and server will depend on Sdk module.
sdk module will depend on server module -mainly to impory mocks and data interfaces.
Is there any standard way to achieve such structure ?
Most probably i would love to
use yarn workspaces to hoist all node-modules into one folder to avoid reinstalling packages in every project
i will be working in all 4 projects at same time, so i need hotreload to be aware of this.
** challenges im facing **
Cra doesnot transpile code outside src folder so although web project does refresh qhen i make changes on sdk. It cannot understand es6 code.
Jest also doesnot understand es6 from node_modules
How can i avoid rebuilding step while working on both sdk and web modules simultaneous ?
Yarn workspace sounds like a good approach for the project structure you're thinking.
You can have a packages directory where you can add your projects:
/packages
- web
- sdk
- native
Now you can use babel to watch for code changes for each of your package using babel -w and yarn workspace will take care of linking them together.
If the babel watchers are running, any changes that you make to the sdk will be reflected to both web and native packages. You can also club all of these together using something like concurrently to fire up watchers using a single command.
I have co-authored an open-source library where we follow a similar structure which you may check here. The difference in this project is that our redux logic is in a separate repo.
In order for jest to work, you can add a test env into your .babelrc file which transpiles modules. So you can add two different environments like test which transpiles into commonjs modules and an es environment which keeps ES modules so your users can take advantage of tree-shaking. Example config
Hope this gives you a good starting point :)
You could try a Project structure like this:
| package.json
|- node_modules
|- Web
| package.json
|- SDK
| package.json
|- Mobile
| package.json
|- Server
| package.json
Then you could install everything within the root folder and set the NODE_PATH env variable :
export NODE_PATH='yourdir'/node_modules
I have an express js backend and a react js frontend.
Now i want to serve this as one project.
Is it possible to build a task with webpack, grunt etc. to build the react js first and then move the build to the public folder in express js?
There is! You can serve your static client files (your react app) from your server. I would suggest checking out this article if you want to know how to do so https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
Yes you can. You need to make a production build which will place all files in a directory; let's say "dist" directory. Now you can run express server or any other server (lite-server suggested) and set base directory as "dist" which will run index.html by default and your app will be running in production mode.
You can read official article from Facebook here :
https://reactjs.org/docs/optimizing-performance.html
I am a beginner with reactjs so I start to create a site, I do all installations, I installed Webpack to generate automatically the bundle.js all it works well and the file bundle.js is well generated but nothing that posster on the index page (page index is empty) and there are also no errors on the console. Somewhat help me please
It can be a bit messy to get up & running if you're not experienced with these technologies and how module bundling in Webpack works.
This is exactly why Facebook created the "create-react-app" solution so that you can get running without any build config and focus on creating the app that you're after instead. You can use it and "eject" to a custom setup anytime and see how they've done it:
create-react-app by Facebook
Here is a guide that you can follow along to create a simple config build:
Setup a React Environment Using webpack and Babel
You can also check out some of the other solutions that the community offers, here is a list of 143 React starter projects:
Find your perfect React starter project
Could you just use Webpack and Babel to transpile the code into the /public directory? Is the asset pipeline necessary to do the integration and still have support for tools like React and Redux dev tools in Chrome?
Could you just use Webpack and Babel to transpile the code into the /public directory? Yes- you can.
Is the asset pipeline necessary to do the integration and still have support for tools like React and Redux dev tools in Chrome? YES
ReactJs is just your view layer. It doesn't matter which backend tools or framework your using. Like in MVC- your ReactJS is the "V" view.