others-How to solve the `Could not download` github because of a connectivity issue between your machine and GitHub problem?

1. Purpose

In this post, I would demo how to solve the following problem when using npx create-next-app :

➜  nextjs npx create-next-app nextjs-blog --use-npm --verbose --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
Creating a new Next.js app in /Users/bswen/private/bw/nextjs/nextjs-blog.

Downloading files from repo https://github.com/vercel/next-learn/tree/master/basics/learn-starter. This might take a moment.

? Could not download "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" because of a connectivity issue between your machine and GitHub.
Do you want to use the default template instead? › (Y/n)

2. The solution

Open our http/https/socks proxy, then start the command again:

➜  nextjs npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
Creating a new Next.js app in /Users/bswen/private/bw/nextjs/nextjs-blog.

Downloading files from repo https://github.com/vercel/next-learn/tree/master/basics/learn-starter. This might take a moment.

Installing packages. This might take a couple of minutes.

npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno -54
npm ERR! network read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bswen/.npm/_logs/2021-12-10T08_42_39_145Z-debug.log

Aborting installation.
  npm install has failed.

➜  nextjs

You can see that there still exist problems to connect to github repo.

This problem is a network problem , we should try to debug like this:

➜  nextjs ping github.com
PING github.com (20.205.243.166): 56 data bytes
Request timeout for icmp_seq 0
Request timeout for icmp_seq 1

After proxy has been set, you can see this result:

➜  nextjs ping github.com
PING github.com (192.30.255.113): 56 data bytes
64 bytes from 192.30.255.113: icmp_seq=0 ttl=64 time=0.316 ms
64 bytes from 192.30.255.113: icmp_seq=1 ttl=64 time=0.259 ms
^C

I think the proxy is not used correctly by npm command, so I set the npm proxy like this:

npm config set proxy=http://127.0.0.1:8087
npm config set registry=http://registry.npmjs.org

Notice that you should change the port 8087 to your own proxy port.

Then try again:

➜  nextjs npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
Creating a new Next.js app in /Users/bswen/private/bw/nextjs/nextjs-blog.

Downloading files from repo https://github.com/vercel/next-learn/tree/master/basics/learn-starter. This might take a moment.

Installing packages. This might take a couple of minutes.

⸨#####⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⸩ ⠸ idealTree:jest-worker: sill fetch manifest color-convert@^1.9.0

....
Installing packages. This might take a couple of minutes.

npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/

added 295 packages in 3m

51 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Success! Created nextjs-blog at /Users/bswen/private/bw/nextjs/nextjs-blog
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd nextjs-blog
  npm run dev

➜  nextjs

It succeeds!

Then reset our npm settings (reset proxy/registry etc.):

npm config delete proxy
npm config delete https-proxy
npm config delete registry

3. Summary

In this post, I demonstrated how to solve the npx/npm download github repo error when using npm create-next-app, the key point is to open your proxy to github.com and set the npm to use that proxy . That’s it, thanks for your reading.