React component realtime mod - javascript

I'm new with React so this question may be a big misunderstanding about how things is done correctly.
I inherit an application build with Python, Django and React.
The React components files are stored in the js folder.
To compile all .js inside the folder, I have to run:
./node_modules/.bin/webpack --config webpack.config.js
This command compiles every *.js, so every modification to the code will be available on the site.
Questions:
Is there a method to get the source mods online without compiling every time?
If there is not a method for check realtime mods, is there a method to compile only the .js I'm modifying?
Am I doing the things in the right methodology or am I missing something?
Thanks!

Related

what main.js should contained in vuejs project?

I'm learning nodejs and vuejs to modify an already created web site.
I installed nodejs, vue and vue-cli and I launched "npm run serve" which apparently start "vue-cli-serve serve"
The problem is that I don't understand what this web server do on files, in this documentation : https://cli.vuejs.org/guide/prototyping.html , it's told:
It automatically infers the entry file in the current directory - the entry can be one of main.js, index.js, App.vue or app.vue. You can also explicitly specify the entry file:
vue serve MyComponent.vue
Ok, but does it run main.js, does it include it into a js file which is the loaded by the index.html on the client broswer.
I see in the browser that the page load a js file named like that: app.23d...js
My question is how this js file is created?
For instance, when the content of main.js is this one:
import './css/icon.css'
Vue.use(VueResource)
Vue.use(VueScrollTo)
what is the output in the app....js file?
It seems it doesn't work at all like php which I usually use on web server
Thank you
Vue uses Webpack to convert your potentially-numerous distinct .js files into bundles with names like app.23d92ab88708...js
From the Webpack documentation:
Concepts
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
I don't suggest trying to get into the details of how Webpack works
This will take a lot of time. If you have an existing Vue project, you are much better off spending your time interpreting that as a Vue project, and accepting that the conversion into the actual app.23d.....js file or files is an automatic process that you do not need to involve yourself in.
It will avoid a colossal waste of time
It won't advance your understanding of how the Vue project works
Whatever you learn about the exact workings of today's Webpack, may be completely wrong about tomorrow's Webpack.
Nevertheless the interface that Webpack provides to you as a Vue programmer will remain constant over future versions.
This is the concept of software abstraction. It is highly advantageous to not have to know how every step of every process works, as long as you know how it is designed to respond to actions you take at a high level.
Horrific thought
I have just re-read your opening sentence:
I'm learning nodejs and vuejs to modify an already created web site.
Please tell me that you are not trying to modify an already created web site where you only have the compiled website available, without the Vue source code? That would be a stupendously painful enterprise.

How do I create a simple Vue project without a big app.js file?

I want to create a Vue app, so I started by using the Vue CLI to do so, but the app.js bundle is 1.2 MB before I've even really done anything. I'd like to bring that way down, as I really don't want/need all the stuff that is being bundled into that file.
Specifically, I would like to have a Vue app with Babel so I can transpile ES6, Webpack for bundling everything, and Sass for the CSS.
What's the easiest way to create a Vue project like this without all the bloat that occurs when I use the Vue CLI? And what I'm specifically looking for is instructions on how to install (I'm assuming just use npm) all of these things and then setting them up to work together, which is the part I'm stuck on.
I can set up Webpack by itself, and I can set up Vue by itself, but I don't know how to get Webpack to compile Vue files, and I don't know how to set up Babel to work with all of this and transpile everything. Thank you.

How to enable hot reloading for the build folder in create-react-app?

I have a React application created using create-react-app. I also have an external application that is using this application by including the bundled JS and CSS files (the ones create using the build script).
Right now, I'm using the React template created by the dotnet new command, and I have configured the server to serve static files located in the build folder.
For this reason, I have created a couple of additional NPM scripts that rename the bundle files (remove the hash from the name), so that I don't need to update my external application's links with every build.
Right now, whenever I change something in the code, the whole build process has to be processed to create the two files.
I have created a "watch" task to run my build scripts whenever I have a change, but I was wondering if there is a way to speed up the process and somehow configure the React application to be served from memory or something just like when we "normally" run the application.
So, maybe a couple of questions:
How to achieve this in a "normal" React app created by create-react-app?
how to achieve this in the context of the dotnet template?
you can use nodemon in the build folder of the create react app.
as the documentation says
By default nodemon monitors the current working directory. If you want to take control of that option, use the --watch option to add specific paths:
so you can use something like this:
nodemon --watch app --watch libs app/server.js
for details try other approaches given here
This could be due to your filesystem, file extensions or the Create-React-App default webpack/project configuration. You don't necessarily have to change all of this because hot-reloading is supposed to work out of the box, and more so if the project has just started.
For example, I once had an issue with a Typescript installation(^17.0.1) where some files with extension .ts will not trigger hot reloading. I had to change to .tsx and add a React import. The same could happen with .js and .jsx files.
In case of problems with your filesystem (Unix, Mac) you can try the React config (FAST_REFRESH=false) here... or changing folder names, but I haven't bumped much into this.

React: Load Component stored on a webserver

the main question is: Is there a good way in ReactJs to load a React Component stores on a webserver?
I already reached the goal to do this but I think my way isn't the best.
Let me explain what I currently do:
I have a core project called "dashboard". This core project has the functionality to load javascript via an XHR request. After the request is done, I call window.eval to use this code.
I have a module called "todoModule". This module is the component (or project) stored on the webserver. The todoModule will automatically inject his own code into the navigation bar of the "dashboard" project. The bad thing is, that the "todoModule" has bundled a total size of 1.2MB. And this is too large to load it via an XHR request. I do the bundling via webpack. I already externaled React, ReactDOM, ReactRouter and so one, to use the dependencies of the "dashboard" project. But it is always to big. And the "todoModule" can have his own dependencies, which I dont need in the core project.
I have an other idea to do this:
Store all dependencies in the core project
Build the module with babel --outDir ./lib ./src to just compile the Javascript files without dependencies. The compilied files will have a size of 33KB.
Upload the compilied files on the webserver.
But I don't know how to implement the features, that the module will always use the dependencies of the core project.
Maybe you can help me or give an other solution.
Thanks
EDIT (Solution):
It is not possible to load compiled components from a webserver in a good way. My solution is to deploy a reactjs application anywhere and use postrobot (https://github.com/krakenjs/post-robot) for the communication

Split a javascript Javascript project in multiple package using webpack ou npm

I'm trying to build an application that have to run on Windows(PC), Android and iOS.
For this, I will use Electron (for Windows) and React Native (for mobile plateforms). Both will be built with React and Redux. This way, I will be able to implement the logic in Redux reducers and middlewares and use them in both projects.
From now, I have done a POC for the Electron app using webpack. The reducers are currently directly in the app code. I want to extract the Redux relative code in a seperate package to allow me using it in a the React Native project.
I can make an npm package for my Redux module containing the reducers and the middlwares but this way, when I will compile my application, webpack will not compile my seperate package, it will use the precompiled version.
So What I want is to be able to make a separate package but still compile it at application compile time (because it is still in developpement and the dev is very closely related to main application dev).
Do I have to do it only with npm or with webpack as well ?
I'm pretty new to the Javascript dev stack.
I think you have different ways to handle that problem.
You can use NPM package. But in code of package, you will store not only original source code, but compiled code too. I mean before publish that package, you'll need to compile it in normal ES5 code.
I think you can use submodule system provided by Git. You should have separate repository with common code of your reducers. And in each project (Electron, RN, etc.), you will have a directory with git submodule. Webpack should compile code in that directory normally without any problems.
UPD:
About submodules you can read nice article here: https://git-scm.com/book/en/v2/Git-Tools-Submodules#Starting-with-Submodules
In few words, in project it will looks like:
cd yourProjectFolder
git submodule add https://github.com/TalAter/awesome-service-workers submoduleDirectoryName
It will clone repository to your project, and create .gitmodules file. Code from submodule will not exists in current project repository. In remote repository it will contain only link to submodule, but on your machine, you will have full code and you will be able to compile it.

Categories