my current front-end dev setup is below:
browserify as build tool
budo as a development server
I have a couple of shared modules packaged up and published on npm for use as a dependency among many projects.
However the development feedback cycle is too long since I have to run npm link ../<repo> && npm run dev every time I need to see an updated change and it takes too long to finish linking , approx. 2-5 minutes.
Is there a way I can watch changes in my link'd module and it will rebuild files that were changes?
Budo (browserify) should follow symlinks, so once you npm link then you should be able to edit both modules concurrently (and get live reload) without having to re-run any commands. This is assuming your other module doesn't need a transpile step. If it isn't working, perhaps it's a bug or some other issue. Feel free to open an issue on budo's GH issues to discuss further.
– #mattdesl
Related
We have an application that has multiple packages linked using yarn link.
When developing our app, we run ‘yarn start’ at the root which runs react-scripts and fires up the local server which is webpack under the hood from CRA.
We then run yarn start on the package we are updating, this runs a watch using webpack.
When we make a change in a package, the change is detected and react-scripts server hot reload recompiles, but it takes almost 20 seconds for the compilation to complete and a few more seconds for the browser to then reload to reflect the changes made.
I recently updated our versions of react and react-scripts to the latest and it seems to take even longer than the previous versions so it’s now taking about 30 seconds to reload.
I was wondering if it’s because we aren’t using yarn workspaces or a monorepo in general.
Does anyone have any experience with this and know of anything to speed things up as it’s becoming painstaking to work on our application as it currently is.
We tried to migrate to vite, but our application is too big to overhaul.
We heard snowpack might help but not sure how to migrate to that.
Does anyone know of any other potential tweaks like doing something to source maps or any drop in replacement for webpack that can help, that works with linked packages?
Thanks
It's my first experience with react and as stated in official docs, I was trying out create-react-app to create my first react app.
But I notice that it takes around 15-20 minutes to get finished( even though I have good internet connection) and once it was completed, I noticed the space taken by the newly created folder to be around 165-170 MB.
Isn't there any quicker way to get started with react as the above mentioned method probably installs some modules that are never going to be used.
Thank You.
I also faced the same problem when i first started learning react. What i did was i manually configured webpack to bundle my code. And then i created central node_modules folder in particular place. So anytime i want start a react project i just create a symlink to the node_modules folder. And also if i want install a new package, i go the central folder and install it, so the package will be available in the node_modules folder and for any of my project that may need it. That way i only need to install a package once not every time i want to use it for a new project.
But recently i found a package manager called pnpm. Instead of downloading a package anytime need to install it, pnpm maintains a central cache of packages such that anytime you want to install a package, it just creates a symlink(or junction in windows) (similar to what i used to do).
Conclusion
In conclusion i would recommend you to just configure a bundler (vite is cool) by yourself and use pnpm to install packages. You can read more about pnpm on there website
create-react-app seems to start localhost server at npm start.
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.
https://facebook.github.io/create-react-app/docs/getting-started
Why do I need to bring up a server just to run JavaScript?
What are the differences, advantages, and disadvantages of opening the build result file directly in the browser?
Also, is this true for other frameworks regardless of create-react-app?
I read React's repository etc on this issue, but there was no topic on this issue.
One of the main advantages to create-react-app starting a localhost server is hot reloading.
When you write most modern JavaScript, including React, your code needs to be transpiled (essentially converted to a different version of JS) before the browser can understand it. This is called the build process, which takes all the files in the src directory and bundles them into a single static JS file.
You could do this manually with npm run build, which creates an index.html that you can open in a browser without running a server. But you have to go through 2 part process to see your changes: rebuild and then reload the browser to see your changes.
create-react-app is built so that it watches for changes in your files, updates the built JS whenever you hit save, and then restarts the server, loading your changes automatically.
By running a server on localhost, create-react-app can update your page instantly every time you save, without you manually rebuilding OR refreshing the page. Hot reloading!
A couple of days ago I've started learning angular and today I've stepped over this project which looks very promissing. What commands should I use or add to my project in order to make it run in a browser? Thank you a lot
Generally this and this might help. Proper configuration will make the development process super-easy.
If the project is well organised you can start working on it like this:
git clone https://github.com/itswadesh/angularcode-authentication-app.git myapp
cd myapp
npm install
npm start
In the second link look at the section named "Keep the app transpiling and running", here's the command shown there:
npm start
The above generally runs the server, keeps track of changes in files and acts on them - translating code to typescript/javascript and re-running the server with changed files.
We've been a Windows shop, mainly relying on Visual Studio as our IDE and build tool. We've begun to explore using Angular and node, and angular-cli.
We have a project that depends upon "angular-cli": "1.0.0-beta.10". I was trying to get this to build on a new machine.
I installed nodejs, then did a global install of angular-cli using npm:
npm install -g angular-cli
Then I tried to do a build:
ng build
I got an error:
It seems like you're using a project generated using an old version of the Angular CLI.
The latest CLI now uses webpack and has a lot of improvements including a simpler
workflow, a faster build, and smaller bundles.
To get more info, including a step-by-step guide to upgrade the CLI, follow this link:
https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14
What I did to get things working was to uninstall angular-cli, and then install version beta.10
npm uninstall -g angular-cli
npm install -g angular-cli#1.0.0-beta.10
After that, things work just fine.
Unfortunately, that's not a solution.
We will, eventually, have multiple projects using node packages, we need them to be able to run simultaneously, without having to uninstall and reinstall global packages.
And we need to be able to run builds automatically on our build machines, without having to RDP into the build machines to mess about with which node packages are installed.
That is, if I have three projects that use angular-cli#1.0.0-beta.10, I expect all three to work on any of the developers machines, and that the build machines will be able to check out any of the three projects and successfully build them.
And if I update one to use beta-12, and another to use beta-14, I expect to be able to commit them to version control, and for the build machine to be able to check out any of three and still be able to build them, regardless of which version they use.
I thought the whole idea of tracking local dependencies in package.json, and storing local copies in node_modules was to avoid dependencies on globally installed packages.
How do people usually manage this issue?
Is there a way I can configure angular-cli so it doesn't depend upon a global install?
Are there other packages with which I'm likely to encounter similar problems? Is there an approach that will work for any of them?
The Angular-CLI can be run with, and the global ng command uses, a locally installed version for each project. This local version can be accessed using the command ./node_modules/.bin/ng
I recommend uninstalling the global CLI you have and taking the time to modify your package.json scripts to reference the local CLI installation rather than the global ng. This is my method to handle varied CLIs on my Jenkins server.
On that note, I do highly suggest following the instructions to move from Beta.10 to Beta.14 (https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14) if you can stomach the change to WebPack. Any projects utilizing CLI Beta.14 or higher can be upgraded to the latest beta simply by uninstalling the CLI, reinstalling it, and then running ng init (Diff [d] any files you've modified!) to update the boilerplate.
Copy & Paste the typescript components html's and css/scss files to a new build, it's not even worth it to mess with the core build of those stuff.
Bear in mind that you might see imports being grayed and the same very imports to be needed to add in app.module.ts as its a core file nowadays to every single project of ours.