I just followed this video to generate a app using vueJs cli, and I'd like to deploy the result on the gh-pages.
I generated the dist folder running the yarn generate command, and
followed this guide to deploy that folder.
However, as you can see here, it render the README.md file.
Here is the repository. What would you change to make it work?
I made a mistake thinking the gh-pages branch was rendered. It was the master branch since user and organization must use the master branch for that.
I solved by creating a new branch to use for development, and the master to render the website.
Everything works now.
Related
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?
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.
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
I have followed these steps:
Made a vue project with Nuxt.js (tested and working with npm run dev)
Used Nuxt.js static site generation to generate a static distribution under the dist directory of my master repository (also tested using VSCode's Live server plugin, works fine).
Deployed the dist directory to the gh-pages branch using: gh-pages -d dist
In the Options for my GitHub project, which is the GitHub Page for my user (augusto-moura.github.io/), I changed the Source to gh-pages.
The gh-pages branch seems to hold exactly what it's supposed to, but as I open the page, the scripts aren't loaded and each return a 404 eror.
What am I doing wrong? GitHub seems to not be serving the JS files inside the _nuxt directory.
you need to add .nojekyll file at root dir when publishing to GitHub Pages, otherwise it won't get resource files from _nuxt dir.
As indicated in the How to deploy on GitHub Pages? guide, in this tiny, easy-to-miss note...
Branch gh-pages for project repository OR branch master for user or organization site
In order to use Pages for your user account, you need
push-dir --dir=dist --branch=master
I have created a vue-cli project.
After I run build it, it works in the http-server. I'd like to push it to my github.io, and I build it as what I found on the Internet. However, at https://tsunaou.github.io/VueJiaogaiFront/dist/index.html I can only see a blank page and it show like this,nothing in the div whose id is app.
enter image description here
It looks like you're building Github Pages from master. To make this work you'll either need to build into a directory called docs (instead of dist) and change the settings on your repo to point to docs, or move the built files up to the project root.
It's in the documentation:
deployment to github pages
I was recently assigned a new project that uses Angular5 on frontend and Laravel on backend. I had no experience with Angular5 so I went through this entire tutorial without any issues. There is no backend and ng serve is used to serve the project. Only when I make updates to components/html/scss/etc files do I see changes to the served local UI - no changes to the local project UI are observed when I make changes to the main.js file within the dist folder after ng build, but changes made to the components/etc. are observed as updates in main.js after ng build. I was under the impression this is the expected behavior.
However, for my inherited project (which I put on my local machine via a simple git clone), the opposite is true. When I run locally, I use php artisan serve. All edits to blades are reflected in the served local project. However, for the "Angular-controlled" portion of the project, only when I make updates to the main.bundle.js file (without using ng build nor ng serve) within the dist folder do changes register in the served local UI - no changes are observed on the local project UI when I make edits to the components/html/etc files.
Can somebody please tell me what the heck I am missing here? What do I need to do to have edits to my local components/html/scss/etc. files reflected in the served local UI on the inherited project?
The inherited project was git cloned so this is how it was before I made any edits. I would imagine that development work is supposed to be done on components/etc. directly, not on .js files within the dist folder!
PS - No 404- or 500-level errors when inspecting the inherited project
In the project directory, updating npm using npm update and then running ng serve did the trick.
I'm trying to create a custom release burnup app for my group. There is an existing app called 'Release Burnup' in Rally, and based on the instructions for rally-app-builder I thought I would be able to clone this app as a starting point.
However, when I use the rally-app-builder clone RallyApps ReleaseBurnup command, it doesn't seem to do anything except change the title in the output html files to "Son of ReleaseBurnup". When I tried the same thing with the example from the github page (which uses rally-app-builder clone RallyApps StoryBoard) then it seems to be successfully cloning an app, with updates to the App.js file, etc.
I'm guessing that I might be using the wrong name to clone, but I'm not sure how to know what names are valid for this command to clone the app I want.
Unfortunately rally-app-builder clone functionality predates newer developments and the availability of source code of catalog apps from RallyApps/app-catalog, so it does not support drilling down those directories.
clone RallyApps StoryBoard works because there is a StoryBoard app at that location. There is no ReleaseBurnup there. ReleaseBurnup code is not available.
Here are the steps to build an app from javascript source files from GitHub app-catalog repository
Prerequisites:
Node.js
rally-app-builder
Get the source to a local directory (you may either fork the
app-catalog repo, or download zip from the same location):
in terminal, cd to the directory of the app you want to work on, and call this command:
rally-app-builder build.
As a result a deploy folder is created with App.html and
App-uncompressed.html inside, and App-debug.html is created in the
root folder of the app.
These steps make sense only if you intent to customize the catalog app and want to use the source as basis. If you want to use a catalog app as it was designed, install the app directly from the AppCatalog as described in this help document.