0

So similar questions have been asked, but I have additional questions that I'm needing answered. It's also quite possible I'm overthinking all of this.

To create a react project offline, I should be able to get the minified react library from a CDN. But without internet access, I need to save out that javascript to a different file, right? Then I can transfer that to my offline machine.

  1. From there, how does running the project work? Can I use command line tools for react? Do I lose the react debugging capabilities? Or am I just writing React code and then loading the index.html into the browser?

  2. How does node_modules work? I know the amount of modules react installs when using create-react-app is a lot. Is all of that self-contained in the CDN?

  3. Do I need to get Babel for transpiling? or is that also included in the CDN?

Thanks in advance.

EDIT:

It seems that using node_modules is going to be out of the question for my use case. So I'll need to use the CDN scripts. What do I lose when using React this way? I'm assuming I can't run from the command-line, so I'm only able to load the index.html into the browser. Same question as before though, do I need Babel for transpiling? What other capabilities that I'm used to having with React to I lose when only using the CDN script?

pianoman102
  • 541
  • 8
  • 22
  • Using a CDN and node_modules are two totally different approaches. Are you trying to just do a simple React sketch or a full-blown project? If the former, download the CDN version, save it as a file, load it in a ` – ggorlen Aug 31 '21 at 15:45
  • If it's the latter, is it even possible to do that offline? – pianoman102 Aug 31 '21 at 15:46
  • OK, do you mean the computer is 100% not connected to the internet permanently, or can you access the internet for the purposes of setting up the project? See [How to install npm package while offline?](https://stackoverflow.com/questions/43064107/how-to-install-npm-package-while-offline) if it's permanent, otherwise just do a normal online install and develop offline. – ggorlen Aug 31 '21 at 15:47
  • It's 100% offline. I can move "approved" files over, scripts are fine, executables are not. – pianoman102 Aug 31 '21 at 15:49
  • Does this answer your question? [How to install npm package while offline?](https://stackoverflow.com/questions/43064107/how-to-install-npm-package-while-offline). Use a technique in this post to install all relevant packages for your React project. If you're not sure which packages you need, there's a huge ecosystem of packages around React, so recommending a specific setup is a bit out of scope and highly opinion-based/use-case dependent. Consult a basic tutorial and use their package.json, or follow a basic webpack/create react app setup if in doubt. – ggorlen Aug 31 '21 at 16:00
  • For what create-react-app installs, is it not a little unrealistic to install all of those packages manually? No, it doesn't answer my question. The ones I listed above are the principal issues I have. Debugging, babel, etc. – pianoman102 Aug 31 '21 at 16:04
  • I'll edit my question, as it appears that using node_modules is going to be out of the question for me. – pianoman102 Aug 31 '21 at 16:06
  • After the update, [why should I not use CDN for react & babel?](https://stackoverflow.com/questions/41885560/why-should-i-not-use-cdn-for-react-babel). You can use babel just fine in the browser, but it's slower (the link discusses this). Again, CDN/no build stage is only suitable for small-scale, non-production projects. The only advantage is that it's much easier to set up, which is great for educational purposes like stack snippets, codepens, jsfiddles and tiny personal projects. It's effortless to use offline -- just download the react and babel JS CDN files and add their script tags. – ggorlen Aug 31 '21 at 16:15
  • Ok great. So from what I understand, doing it this way will give me most of the features of React, but it's slow because it has to transpile jsx. So theoretically I could write jsx, and then compile it with babel, and deploy that to the browser? maybe? Otherwise I just deal with a slow program. – pianoman102 Aug 31 '21 at 18:53
  • Well, then you're back to dealing with bundling and node_modules which you already said you wouldn't do. It'd be much easier to offer guidance if you would be able to take a step back and provide a bit of context for your project. What are you actually trying to do here, exactly? – ggorlen Aug 31 '21 at 19:00
  • Well, I said that because I assumed it wouldn't be feasible to export all of the node modules that are installed with create-react-app. But I'm trying to get a web client as a tool for our engineers. It will be on a closed-off internal network. I was exploring using react for code-reuse and speed of development. Otherwise it's raw html with bootstrap and js. I just wasn't sure how to use react with CDN and still have the speed of compiling it before deploying... again, it's quite possible I'm thinking about it all wrong. – pianoman102 Aug 31 '21 at 19:52
  • Why can't you export all of the node modules that are installed with CRA? It'd be copy-pasting a folder if I'm not mistaken, or failing that, using a utility that does virtually the same job as npm, but offline. I'm still pretty confused -- even if it's deployed on an internal network, what stops you from _developing_ the project on a fully internet connected machine that can at least run npm to get you the packages? Running the deploy on an internal network sounds like a totally different constraint from whether or not the development happens on an isolated machine or not. – ggorlen Aug 31 '21 at 19:53
  • Well it's security practices at my work. We don't have development machine connected to the internet, and all the tools we use that are on the dev machines that are off the network go through an approval process. Additionally, all the tools that I would be integrating with this react app are on the internal network. So all the development has to happen on the internal network machines. – pianoman102 Aug 31 '21 at 20:03
  • OK, that makes sense. If the tool is purely internal, how many people are using it and how critical is efficiency? If it's like, a couple dozen people using a small micro-site/utility/dashboard for lightweight activities, then it's probably not necessary to go for a build with node_modules. If there are thousands of people using it constantly, it's a huge app, and every drop of performance is going to save people time over the long haul, then I'd ask your people if they can vet a `node_modules` with a working webpack/CRA (or whatever) setup, and use that. – ggorlen Aug 31 '21 at 20:07
  • Yeah a couple dozen is the load. But maybe not even that since not all of them will be using it at the same time. So if it's not going to make a difference in performance, I won't need to get babel or anything? Just use the React CDN like I normally would? – pianoman102 Aug 31 '21 at 20:20
  • Simultaneity of users doesn't matter, all of the code runs on the front-end browser of each individual user. It's a matter of performance per user, and it sounds pretty minor -- this is probably premature optimization. For small apps, it's unlikely anyone will notice a significant difference, especially if it's an internal tool that isn't facing customers. Babel has a CDN too, but if you don't need JSX you can skip it. – ggorlen Aug 31 '21 at 20:53
  • But if I plan to use JSX I need babel? – pianoman102 Aug 31 '21 at 21:11
  • 1
    Yes, how else would you transpile the JSX to runnable JS the browser understands? If you create and play with a simple proof of concept project, I think this process will answer most of your questions. There are lots of threads you can find like [this](https://stackoverflow.com/questions/37228247/how-to-use-babel-directly-from-a-script-tag-without-installing-babel-itself) that can probably offer more insight than I. – ggorlen Aug 31 '21 at 21:35

0 Answers0