1

I tried uploading my files to Github, but GitHub says it's too big.

I then uploaded the content of the dist folder after building for production.

This worked just fine, but it's not very useful.

What is the proper way to upload a Vue.js app to GitHub?

hc_dev
  • 8,389
  • 1
  • 26
  • 38
Posoroko
  • 189
  • 1
  • 2
  • 11

2 Answers2

1

What you generate (binary files which can be big) should not be versioned/pushed to GitHub.

It is better to use a local plugin which will, on GitHub side, build, tag and publish a release associated to your project.

For instance: semantic-release/github.

You can combine that with a GitHub Action, which can take that release, and deploy it on a remote server of your choice (provided it is publicly accessible from GitHub): see for example "How to deploy your VueJS using Github Actions (on Firebase Hosting)" from John Kilonzi.

For your existing dist, you should delete it (from Git only, not your disk) and add it to your .gitignore:

cd /path/to/repo
git rm --cached dist
echo dist/>>.gitignore
git add .gitignore
git commit -m "Delete and ignore dist/"
git push

What happens if I add a node module( like if I decide to add an image cropper). How can the other contributers deal with that?

You need to add the declaration of that module in your project, not version the module itself. For instance, using Vue.use.

Also: I host the app on netlify. It builds the site straight from github. But it wont be able to build the site if gihub doesnt have the dist folder...

See "How to deploy your Vue app with Netlify in less than 2 min!" from Jean-Philippe Fong: Netlify itself will build the dist (from your GitHub project sources) and publish it.

VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • Thanks a lot for your answer. I afraid I'm too much of a nood to understand all of it. If I understand correctly: I ignore the dist folder, but use a plugin to build the app so it can go live on my netlify account? – Posoroko Jul 02 '21 at 08:04
  • @Posoroko Yes, or Netlify can do it for you (see my edited answer): but in any case, dist should not be versioned/pushed. – VonC Jul 02 '21 at 08:06
1

You should add a .gitignore file to the root of your directory where you can ignore files and directories.

Most typical ones to ignore are the following:

node_modules
/dist
.env
.vscode
Sølve T.
  • 4,159
  • 1
  • 20
  • 31
  • Ok thanks for your answwer! What happens if I add a node module( like if I decide to add an image cropper). How can the other contributers deal with that? I have to say that I'm still new to programming. – Posoroko Jul 02 '21 at 07:58
  • Also: I host the app on netlify. It builds the site straight from github. But it wont be able to build the site if gihub doesnt have the dist folder... Should I just add it in? – Posoroko Jul 02 '21 at 08:00
  • The other contributes will do an `npm install` once they fork your repo.(the package.json file holds all the node_modules needed) You do not want to add the dist folder to github, in netlify, under the basic build settings, you add a build command `npm run build` and set the dist folder as publish directory. This way netlify will automatically build your project. – Sølve T. Jul 03 '21 at 00:38
  • What happens if I add a node module - You will have A LOT of files in the repository that is not needed at all. Your files changed will be polluted by all the unneeded files. Don't get me wrong, they are needed, but only on the client side. Everyone that wants to build your projects should do `npm install` themselves. This saves space and is the norm. – Sølve T. Jul 03 '21 at 00:41