CODEWITHSUNDEEP
reactjs
antonkornilov-ua
antonkornilov-ua

Reputation: 133

How to create simple React app without internet connection

I live in Ukraine, Kyiv. And due to the constant terrorist acts of russia, I very often have no electricity. However, there is a desire to learn React. But there is a dilemma: how to create, view and deploy simple react app, because I know that

npm init vite

npm create-react-app

they all need internet connection to download data etc.

So how can I create local react app and when internet restores, publish it?

Probably codesandbox?

Upvotes: 3

Views: 5819

Answers (4)

Dave Powers
Dave Powers

Reputation: 2363

My suggestion is to rely on npm's built-in caching abilities. Some of the previous answers require you to have already created an app and installed its dependencies, but the question asks about creating new applications while offline which this approach will allow.

With packages cached

  1. Run npm create vite@latest --offline
  2. Select "React" as the framework
  3. From the project directory, run npm install --offline

npm documentation for --offline flag

This will create a new React app and install dependencies without an internet connection. Running the above will cause an error if the packages are not cached. You can verify packages are in the cache with npm cache ls.

Without packages cached

There are two ways to caches the packages, each of which only needs to be done once (as long as you do not clear the cache). Both will require you to be online.

The "with packages cached" steps can be followed afterward.

Run the npm create and install steps without --offline flags

This is the simpler option, which you may have already done:

  1. Run npm create vite@latest
  2. Select "React" as the framework
  3. From the project directory, run npm install

Install the relevant packages globally

I like this option since you can run a single non-interactive command to complete the setup:

  1. Note the required dependencies for your preferred template (React)
  2. Install the React dependencies globally, as well as the create-vite package: npm install -g create-vite react react-dom @types/react @types/react-dom @vitejs/plugin-react eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh

Upvotes: 0

Juan Picado
Juan Picado

Reputation: 1996

All answers I've read are valid, but I want to contribute a bit. I'm the verdaccio maintainer so feel free to ask me more details via comments or asynchronously via GitHub discussions.

While you have internet you can use verdaccio (as already recommended) you can install packages through the proxy, verdaccio works by demand, so if you install npm create-react-app --registry http://localhost:4873 all packages will be in the local storage. The storage is just a folder that host all packages RAW that can be consumed offline with any package manager. Each packager manager has its own local cache, but is not sharable, but verdaccio can allow you that. If you suddenly lose internet the command npm create-react-app --registry http://localhost:4873 should still works without any issue, but if you need new packages (modify the package.json) you definitely need wait until get back online again.

The default behaviour should be good enough for your needs, but also there are plugins that can improve your experience like:

https://www.npmjs.com/package/verdaccio-offline-storage

If you need move your storage to another computer, you can use USB and just copy the storage folder (location might differ from OS you are using) zipped and just move it and install again in that computer.

The recommendation is always use proxy with all your projects while you are online and keep caching as much you can, there is now way to fetch in advance at this point but maybe in the future.

Verdaccio is maintained for many reasons, but the main one is to allow everyone keep learning Node.js/JavaScript independently of the lack of network access. Hopefully you can back to normality and circumstances get better, in the meantime feel free to ask follow up questions.

Upvotes: 0

Thomas
Thomas

Reputation: 246

As soon as you have all the needed npm packages installed, you can develop local without the need of an internet connection. create-react-app also comes with a preconfigured local webserver server where your app gets deployed to by using npm start.

In addition, you can use Verdaccio. That is some sort of proxy/cache for npm. Once correct configured, it caches all used npm packages on your local machine. Then you can also create new react apps without the need of an internet connection. Setting up Verdaccio is pretty straight forward.

Upvotes: 1

Esh
Esh

Reputation: 516

Really Hope the circumstances get better.

You don't need internet to develop in react, once you have installed all the npm dependencies. So whenever you have internet, just execute those commands and all the dependencies will be downloaded in a folder called node_modules.

Once that is complete, you can run npm start which will serve the app locally (without internet) on localhost:3000 and it will automatically open that url in a web browser.

But keep in mind, that if your app accesses a remote API or data, then you would need internet for that.

Upvotes: 3

Related Questions