DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Using GitHub
Hany Taha
Hany Taha

Posted on

Using GitHub

Hello Guys,

I have a question about GitHub.

I made a project using Vue.js. I want to share it on GitHub so that anyone can download it.

I started by making a repo then uploaded my files in it.
now if anyone downloaded the project, how can he run it on his own PC?

Top comments (6)

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

πŸ‘‹ Hello! And welcome to DEV!

Assuming the other user has git (a language that GitHub utilizes) installed on their computer, they can:

  1. git clone {repository URL} to copy your code to their computer
  2. npm install (or yarn depending on your project) in the new git directory on their computer to install any needed packages
  3. Once that completes, run npm run serve (or other command setup in your package.json) to spin up their local version of your code.

If you are importing Vue via CDN, they would be able to skip steps 2 & 3 (unless you have other npm packages installed) and open the index.html (or equivalent) file in their browser.

The exception here is if your project uses any dotenv files - in which case they would need to setup the corresponding environment variables before step 3 above.

Collapse
 
hanytaha61 profile image
Hany Taha Author

thanks for replying Tyler,
I'm using vue cli in my project. should I upload the (dist) folder or upload the whole project folder?

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Usually you'd upload your Vue project files and folders other than:

  • dist
  • node_modules
  • .env files
  • default files in .gitignore

For example, see this repository where I have a single Vue Component I was testing out:

GitHub logo 12vanblart / sorting-hat-vue-component

Vue.js Card uses potterapi.com to generate random house & corresponding theme.

hp-api-test

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.




The example website that generates from this repository is generated by Netlify - which I wrote about in this post (Just skip all the parts about Hover if you're not looking to do that piece of it):

Something to note: Anything you put in a public repository will be visible to anyone that views it. GitHub allows for private repositories also (even on free accounts!) which can still be deployed to Netlify as outlined in the post, but has the added advantage of not being publicly facing.

Thread Thread
 
hanytaha61 profile image
Hany Taha Author

I have successfully downloaded and installed your repo.
The problem is in my repo.
when I download it and run npm install, I got the following error:

C:\Users\hany\Desktop\my-profile-master>npm install
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! zlib: unexpected end of file

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hany\AppData\Roaming\npm-cache_logs\2019-11-08T21_57_42_610Z-debug.log

C:\Users\hany\Desktop\my-profile-master>

what's the problem here?

Thread Thread
 
terabytetiger profile image
Tyler V. (he/him)

Maybe try this?

npm ERR! code Z_BUF_ERROR when install

19

In my server(CentOS 7.2) I install the dependencies:

npm install 

But I get bellow error:

npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! unexpected end of file

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-02-11T21_03_20_261Z-debug.log

in the /root/.npm/_logs/2018-02-11T21_03_20_261Z-debug.log, the info…

Thread Thread
 
hanytaha61 profile image
Hany Taha Author

It works fine now.
Thanks bro <3

I cleaned cache using npm cache clean --force

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›