25 ms·

Serving Vue.js Apps on GitHub Pages

106 points by muhammadusman 7y ago

ddtaylor 7y ago
I have been using Vue.js for a while and I'm really impressed by it. During development using `npm run serve` and having it automatically rebuild whenever a file is added or changes is great and then baking it out for static storage using `npm run build` is a great follow up.
- numbers 7y ago
  yes, have you been using vue-cli? that's what makes prototyping new ideas so easy it's a no brainer!
  - ddtaylor 7y ago
    Yeah I am using `vue-cli`
- ng12 7y ago
  None of this is specific to Vue. If you're using the Vue-CLI it's powered by Webpack which is the same build/development tool used by most major frameworks.
deleted 7y ago
[deleted]
Orphis 7y ago
So you just build your app and pushes the "binary" output on Github Pages? It would be better to push the output dir to another branch folder and force push it when you update.
- mplewis 7y ago
  This is what I do. Instead of committing /docs, I build into the root of the repo under the gh-pages branch. I use this package to help: https://www.npmjs.com/package/gh-pages https://www.npmjs.com/package/gh-pages
- codetrotter 7y ago
  Yeah, creating an orphan “gh-pages” branch is what I always do. Repositories that include build output in the main branch make me rather quite upset. Your additional point about force pushing is a good one also. While I’ve been using separate branch I’ve still been commiting each new build as a new commit. But overwriting the initial commit makes a lot more sense actually.
dr01d 7y ago
You could just use gitlab: https://gitlab.com/pages?page=1 https://gitlab.com/pages?page=1 Much better imo
- mfatica 7y ago
  can you quantify how it is better? I can't find any details on what differentiates them
  - MatekCopatek 7y ago
    The main difference in my experience is the fact GitLab CI is very flexible. In this case, it would be trivial to use a node docker container and automatically build static assets on the server instead of doing it locally and polluting the repo.
founderling 7y ago
You don't necessarily need the whole server-side dance: https://jsfiddle.net/chrisvfritz/50wL7mdz/ https://jsfiddle.net/chrisvfritz/50wL7mdz/ I find developing without a server side build process much more lightweight and enjoyable.
- muhammadusman 7y ago
  Thanks for the suggestion. My example app is pretty contrived but I was mostly running into this issue when I had a multi-component app. An example is another repo I was working on: https://github.com/usmanity/prompt/tree/master/src https://github.com/usmanity/prompt/tree/master/src I guess, I should've prefaced my blog post with that :p
- fimdomeio 7y ago
  I'm currently batling with this and components inside components, not sure how to do it nor where to find info for it. if anyone as any guide would be very much appreciated.
- awinder 7y ago
  In a lot of cases you really don't want a server at that layer of the stack anyways, when you could be serving your site from a CDN/"edge" that's built for low-latency to end users, cost-optimized for transfer and not having to play all of the games that scaling yet another layer brings. I'm willing to believe that some people really need server side rendering but it'd a hard sell to convince me that the majority of people chasing SSR really need it, or that they're better off for it.
tjr 7y ago
Any suggestions for running a Vue.js application as a local set of files, without running a web server? My use case is slightly more obscure than this, but imagine something like a local, off-network kiosk interface.
- fimdomeio 7y ago
  I guess this is an awful way to do it, but I heard stories about people that got away with a script that did and find and replace on build files to set some crazy paths.
- altec3 7y ago
  I've run vue apps just as local files. you'll run into cors issues with certain resources, but other than that it works pretty well.
- revvx 7y ago
  You mean running production frontend-only apps? You can just open "index.html" in your browser and it will run fine, as longs as the paths inside your files are relative. You might have to reconfigure your bundler. If you're using Parcel, just pass `--public-url .` as a command line option when building. For Webpack use the publicPath configuration, etc. But remember that pages accessed via file:/// have limited permissions: you can't use localStorage, access some sites using CORS, can't capture audio/video, etc. But if you're not using these things then it's fine.
Trifectuh 7y ago
There's also this: http://client-side-vue.herokuapp.com http://client-side-vue.herokuapp.com as an alternative https://github.com/justinwash/Client-Side-Vue https://github.com/justinwash/Client-Side-Vue
stared 7y ago
It is not a good approach. Much better to use - Vue with no build (see e.g. https://github.com/stared/interactive-machine-learning-list https://github.com/stared/interactive-machine-learning-list) - build -> push to a separate, orphan branch: https://medium.com/@codetheorist/vue-up-your-github-pages-the-right-way-955486220418 https://medium.com/@codetheorist/vue-up-your-github-pages-th... Pushing binaries to the same branch is a very, very bad git practice.
davidjnelson 7y ago
Vue seems very similar to react[1]. Anyone know why vue is seeing a big swing in adoption when we already have react? Maybe because it's built into laravel[2]? Some other reason? 1. https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd https://medium.com/javascript-in-plain-english/i-created-the... 2. https://laravel.com/docs/5.8/frontend https://laravel.com/docs/5.8/frontend
- rumblestrut 7y ago
  Because the work is done mainly by a small team instead of backed by a company that we are all starting to really distrust? Also, excellent docs. We have used Vue at my company for almost three years now. Love it.
- robodale 7y ago
  I don’t see the point to bother with react, when I’ve been able to do so much with vue.js
- satvikpendem 7y ago
  It is much more approachable, especially moreso than JSX. It combines the benefits of React but with single file components where HTML, JS, and CSS are all included in one file. https://vuejs.org/v2/guide/single-file-components.html https://vuejs.org/v2/guide/single-file-components.html
vmware513 7y ago
How do you manage subroutes and direct deeplink to a subpage?
thibautg 7y ago
I’m using the deployment method to the gh-pages branch documented on Vue CLI’s website [0]. Works pretty well. [0] https://cli.vuejs.org/guide/deployment.html#github-pages https://cli.vuejs.org/guide/deployment.html#github-pages

106 points by muhammadusman 7y ago

I have been using Vue.js for a while and I'm really impressed by it. During development using `npm run serve` and having it automatically rebuild whenever a file is added or changes is great and then baking it out for static storage using `npm run build` is a great follow up.

numbers 7y ago
yes, have you been using vue-cli? that's what makes prototyping new ideas so easy it's a no brainer!
- ddtaylor 7y ago
  Yeah I am using `vue-cli`
ng12 7y ago
None of this is specific to Vue. If you're using the Vue-CLI it's powered by Webpack which is the same build/development tool used by most major frameworks.

deleted 7y ago

[deleted]

Orphis 7y ago

So you just build your app and pushes the "binary" output on Github Pages? It would be better to push the output dir to another branch folder and force push it when you update.

mplewis 7y ago
This is what I do. Instead of committing /docs, I build into the root of the repo under the gh-pages branch. I use this package to help: https://www.npmjs.com/package/gh-pages https://www.npmjs.com/package/gh-pages
codetrotter 7y ago
Yeah, creating an orphan “gh-pages” branch is what I always do. Repositories that include build output in the main branch make me rather quite upset. Your additional point about force pushing is a good one also. While I’ve been using separate branch I’ve still been commiting each new build as a new commit. But overwriting the initial commit makes a lot more sense actually.

dr01d 7y ago

You could just use gitlab: https://gitlab.com/pages?page=1 https://gitlab.com/pages?page=1 Much better imo

mfatica 7y ago
can you quantify how it is better? I can't find any details on what differentiates them
- MatekCopatek 7y ago
  The main difference in my experience is the fact GitLab CI is very flexible. In this case, it would be trivial to use a node docker container and automatically build static assets on the server instead of doing it locally and polluting the repo.

founderling 7y ago

You don't necessarily need the whole server-side dance: https://jsfiddle.net/chrisvfritz/50wL7mdz/ https://jsfiddle.net/chrisvfritz/50wL7mdz/ I find developing without a server side build process much more lightweight and enjoyable.

muhammadusman 7y ago
Thanks for the suggestion. My example app is pretty contrived but I was mostly running into this issue when I had a multi-component app. An example is another repo I was working on: https://github.com/usmanity/prompt/tree/master/src https://github.com/usmanity/prompt/tree/master/src I guess, I should've prefaced my blog post with that :p
fimdomeio 7y ago
I'm currently batling with this and components inside components, not sure how to do it nor where to find info for it. if anyone as any guide would be very much appreciated.
awinder 7y ago
In a lot of cases you really don't want a server at that layer of the stack anyways, when you could be serving your site from a CDN/"edge" that's built for low-latency to end users, cost-optimized for transfer and not having to play all of the games that scaling yet another layer brings. I'm willing to believe that some people really need server side rendering but it'd a hard sell to convince me that the majority of people chasing SSR really need it, or that they're better off for it.

tjr 7y ago

Any suggestions for running a Vue.js application as a local set of files, without running a web server? My use case is slightly more obscure than this, but imagine something like a local, off-network kiosk interface.

fimdomeio 7y ago
I guess this is an awful way to do it, but I heard stories about people that got away with a script that did and find and replace on build files to set some crazy paths.
altec3 7y ago
I've run vue apps just as local files. you'll run into cors issues with certain resources, but other than that it works pretty well.
revvx 7y ago
You mean running production frontend-only apps? You can just open "index.html" in your browser and it will run fine, as longs as the paths inside your files are relative. You might have to reconfigure your bundler. If you're using Parcel, just pass `--public-url .` as a command line option when building. For Webpack use the publicPath configuration, etc. But remember that pages accessed via file:/// have limited permissions: you can't use localStorage, access some sites using CORS, can't capture audio/video, etc. But if you're not using these things then it's fine.

Trifectuh 7y ago

There's also this: http://client-side-vue.herokuapp.com http://client-side-vue.herokuapp.com as an alternative https://github.com/justinwash/Client-Side-Vue https://github.com/justinwash/Client-Side-Vue

stared 7y ago

It is not a good approach. Much better to use - Vue with no build (see e.g. https://github.com/stared/interactive-machine-learning-list https://github.com/stared/interactive-machine-learning-list) - build -> push to a separate, orphan branch: https://medium.com/@codetheorist/vue-up-your-github-pages-the-right-way-955486220418 https://medium.com/@codetheorist/vue-up-your-github-pages-th... Pushing binaries to the same branch is a very, very bad git practice.

davidjnelson 7y ago

Vue seems very similar to react[1]. Anyone know why vue is seeing a big swing in adoption when we already have react? Maybe because it's built into laravel[2]? Some other reason? 1. https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd https://medium.com/javascript-in-plain-english/i-created-the... 2. https://laravel.com/docs/5.8/frontend https://laravel.com/docs/5.8/frontend

rumblestrut 7y ago
Because the work is done mainly by a small team instead of backed by a company that we are all starting to really distrust? Also, excellent docs. We have used Vue at my company for almost three years now. Love it.
robodale 7y ago
I don’t see the point to bother with react, when I’ve been able to do so much with vue.js
satvikpendem 7y ago
It is much more approachable, especially moreso than JSX. It combines the benefits of React but with single file components where HTML, JS, and CSS are all included in one file. https://vuejs.org/v2/guide/single-file-components.html https://vuejs.org/v2/guide/single-file-components.html

vmware513 7y ago

How do you manage subroutes and direct deeplink to a subpage?

thibautg 7y ago

I’m using the deployment method to the gh-pages branch documented on Vue CLI’s website [0]. Works pretty well. [0] https://cli.vuejs.org/guide/deployment.html#github-pages https://cli.vuejs.org/guide/deployment.html#github-pages