Open multiple React apps constantly - javascript

I'll explain what I need to do and what I'm doing with it. My ask is for an advice on how to improve this process.
I'm a tutor in a ReactJs course and I need to review my tutees apps. So, I've trying 2 things. First I was cloning the repo on a random folder in my pc, then installed the node_modules from the app and the ran the app. Then I deleted the whole folder and continue with the next one (time consuming). Then I started to leave the folders and when I had to review anything new from the same student I did a fetch/pull to obtain the new commits from that repo, but, I don't know why, somehow it started draining my ram and my pc was so slow (I have 20 apps to review, so 20 repos, 20 node_modules, not running at the same time, I kill the server before reviewing the next one, but still..)
I'm not really sure if I'm explaining myself. I could review only the code, but I really prefer to run each app to give feedback, make sure to review the console.. actually see how the app is looking like. So please, if you have any advice for me to improve this process I would really appreciate it. I believe I'm doing it all wrong and there are ways to do this better.
Thanks in advance.

Ask your student/s push build or dist folder in repo.
Create one node-express boilerplate to run react static files.
As you have bundled code in repo, just copy that bundled code (build/dist folder) in node-express destination.
It will eliminate your work for installing node_modules for every project.

Related

How napchart.com is constructed

I want to build a site similar to this one.
So I downloaded the source code from https://github.com/larskarbo/napchart on my Windows 10 machine, but I don't know how to execute the thing and see it running in a page so I can play with the code and see how it is working.
I have node.js installed but I am not sure of how to use it, so detailed instructions are welcomed
Also, I tried saving the code from the site directly by clicking Save As but it didn't work though. Why is that happening?
Considering napchart has been pushed to the npm registry, you shouldn't need to interact with its source code directly.
As per your second question, I don't advise to download any of it manually. Running npm install napchart --save in your project directory should get you going.
That being said, the author also published the source of https://napchart.com/app, which can help you bootstrap your project.

Is it okay to link node modules files in webpack.config.js?

In some projects, I saw developers didn't link to node_modules files in webpack.config.js (eg. "./node_modules/boostrap/dist/js/boostrap.bundle.js"), instead, they copied the file to assets/js and linked it there. Some of my friends also told me that they prefer this option because they never feel safe with linking to node_modules (I guess as somebody may use npm update...?)
What would you call a "good practice"? Is it totally fine to link to node_modules? If not - what wrong can happen?
I used this method in small projects as I don't think there is a need for doubling files but in larger - for peace of mind - I used the path to assets
It can be okay to do it. Purely from the build step perspective, it doesn't make a difference.
The trade offs you are making between using the node modules as npm provides them (node_modules) and storing your own copies, in an assets or vendors folder, are about:
security
source code management & development efficiency
storage space
When all the thousands of developers around the world create little pet projects and push them to Github, it wouldn't make sense for all of them to store their own copy of JQuery and then push it into their Github repo. Instead we push a package.json file that lists it as a dependency, we do this for every third party dependency and prevent creating a repository where a lot (even most) of the code is not application code, but dependencies. That is good.
On the other hand, if a developer always downloads dependencies every time a new project is started/cloned/forked, you potentially risk, with every module download, the chance of installing a compromised package version. For this we solve with vulnerability scanners, semantic versioning and lock files (package-lock.json) to give you control on how and when you get updates.
Another problem with downloading always is the bandwidth it consumes. For this we solve with a local cache. So, even if you uninstall a module from one project, npm doesn't really delete it from your drive. It keeps a copy on a cache folder. This works really well for most developers, but not so much in an enterprise environment with massive applications.
A problem, that has impacted already the world severely, is that if a module author decides to delete the code then lots of apps stop working because they can't find the dependency anymore. See left-pad broke Node, Babel... (It also broke things at my work)
The issue with moving things out from node_modules to assets is that if your app has 100 dependencies, your are not going to want to do that 100 times. You might as well save in your source control system the complete source code found in node_modules. That comes at a price of course, that folder can have a huge size.
A good balance can be found by using different tools and approaches. Wether you vendorize third party dependencies (store your own copy) or not depends on what has the better cost/risk ratio in your situation.

How to convert a CodeSandbox proyecto into a React Production App?

I'm having a little problem with React App, see. My computer is a bullshit and I program in CodeSandbox. a week ago I have finished my React App that I was made in CodeSandbox and for upload it in my host I've downloaded the proyect to my pc and I open the command prompt for make a production build. I've used npm install for every dependencies and those things, ffter an hour, or so, my build was supposed to be ready so I used static-server to open it on my local internet, total. That when I was going to upload it to the host it did not work, I do not know why, but it goes blank.
Please I need help because I'm making a web for educational purposes :(
Thanks my web: http://eskoni.ezyro.com/d/ and sorry for that long history XD

NPM build confusion

I am new to working with NPM/Webpack build flow for frontend development. I've read through some tutorials and have helped some, but I have a few questions if someone can help explain them better.
When I start a new project, I think of it a singular component to my bigger project (website in this case). When I setup npm within my project folder it installs 80MB of packages. When I build my little hello, world example - I get a 172KB dist.js file.
Seems like everything is getting packed in there.
So my question is how to not include the kitchen sink and just my requirements for this project?
And also, if I build a similar project with the same requirements, how do I make sure I don't have 2 of the same libraries loaded within a webpage for example, I would want 'lodash' loaded only once.
Thanks
Rich

Meteor on Github, how can I work on same project with a friend

I am a total programming newbie.
If I upload my Meteor project to Github and after clone it, I cant run it in Meteor anymore, it will crash.
When I delete the local entry in .gitignore then it works.
But then with every lil change many local files change and the github commits look messy.
How can I fix this?
I think you first need to run meteor create app-name for meteor to create the local folder and the various things it needs in there such as mongodb etc and then clone your repo into that folder. You don't want this content in the repo so keep your .gitignore file but you both need your own local copies of local folder for the app to run.
Or link to the repo if it's public and I'll see if I can run it/what errors pop up.

Categories

Resources