Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Serving Vue.js Apps on GitHub Pages (usmanity.com)
106 points by muhammadusman on May 2, 2019 | hide | past | favorite | 26 comments



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.


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.


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


You don't necessarily need the whole server-side dance:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

I find developing without a server side build process much more lightweight and enjoyable.


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

I guess, I should've prefaced my blog post with that :p


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.


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.


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)

- build -> push to a separate, orphan branch:

https://medium.com/@codetheorist/vue-up-your-github-pages-th...

Pushing binaries to the same branch is a very, very bad git practice.


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...

2. https://laravel.com/docs/5.8/frontend


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.


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


I don’t see the point to bother with react, when I’ve been able to do so much with vue.js


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.


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.


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.


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.


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


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.


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.


yes, have you been using vue-cli? that's what makes prototyping new ideas so easy it's a no brainer!


Yeah I am using `vue-cli`


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

Much better imo


can you quantify how it is better? I can't find any details on what differentiates them


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.


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




Consider applying for YC's Winter 2026 batch! Applications are open till Nov 10

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: