build and publish dist folder to github pages - vue.js

I created a project with Vue.js and Vuetify using the Vue CLI. I would like to host this application with Github Pages. So I took a guide from here
https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch
and I am not using the history moute of the Vue Router (https://router.vuejs.org/guide/essentials/history-mode.html) to make sure I don't need a server.
I created a build of my project and renamed the generated dist folder to docs. This docs folder is placed in the root directory (where it was generated). When I select master branch /docs folder as my Github Pages publishing source I get a blank white page.
When I check the console I get a
Failed to load resource: the server responded with a status of 404 ()
for each file generated in the dist/docs folder. What am I missing?

This could be that the root path of your app is set to look at the root of your github instead of the root of the repository.
It also looks like you are using vue-cli-3 from the tags. So here is what I have done for deploying a Vue app to be hosted on github pages.
Create a vue.config.js file in the root of your app.
In that file, set the public path to match the repository name.
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/YOUR_REPO_NAME/' : '/'
}
Create a deploy.sh file in the root of your app.
In the file, write the following
set -e
npm run build
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f git#github.com:YOUR_USER_NAME/REPOSITORY_NAME.git master:gh-pages
cd -
Now from the command line, in the root of your app, you can run sh deploy.sh. This will run the build command for vue-cli, go into the dist folder, commit those files and push them to the gh-pages branch.
Then you can set your github repo to use gh-pages instead of docs. Since you mentioned you are not using history mode for vue-router, you should see the # in the URL string and it will work when a user refreshed the page on a different route other than home.
Hope that helps point you in the right direction for deploying and hosting your Vue app on github pages.

I add vue.config.js file, and modify webpack config,like this
module.exports = {
outputDir: 'docs'
}

Related

Github pages deploy vue project

I am successfully done deploy to github pages and I have an Active status of deployment. But I can't see my app. And I don't understand what is the promlem:
https://hikkiyarik.github.io/
My repo:https://github.com/HikkiYarik/HikkiYarik.github.io
I solved a problem. We need SSH key for your GitHub account, deploy.sh file and two repos like my repos foodshop and HikkiYarik.github.io.
My GitHub account for example:
https://github.com/HikkiYarik
Look closely at the contents of the file deploy.sh:
<git push -f git#github.com:HikkiYarik/HikkiYarik.github.io.git master:gh-pages>
This means we push our project that was built in the foodshop repo to the HikkiYarik.github.io repo.
By the way, gh-pages branch is created automatically. Script deploy.sh starts running when we write the command:
npm run deploy
For the command to work, just write a package.json file in scripts:
"deploy": "sh deploy.sh"

empty site after using nmp run build (vue 2 cli)

Im using project vue 2 cli + vuex + router (without history mode) but when Im opening index.html, after "nmp run build" command, site is empty. How can I solve it... I need site to be opened on index.html (like common cdn project)
The dist directory is meant to be served by an HTTP server (unless you've configured publicPath to be a relative value), so it will not work if you open dist/index.html directly over file:// protocol.
Source
One way to test your build, is to install Serve:
// install Serve globally
npm install -g serve
// Run in project root, with folder name as input
serve -s dist

Problem with deploy Nuxt.js in GitHub Pages

I recently started learning Nuxt.Js and faced with the problem of deployment on GitHub Pages.
I do everything according to the instructions:
https://medium.com/#kozyreva.hanna/nuxt-js-gh-pages-deployment-73b88aa3aa65
Infinite nuxt-loading appears on gh-pages instead of content.
GitHub: https://github.com/Owe7x/slide
GH-pages: https://owe7x.github.io/slide/
What could be the problem?
I've already tried to follow that steps and they didn't work for me, after some researches I ended up with following steps :
remove the dist entry from .gitignore file
run npm run generate
run git add . then git commit -m "deploy on gh-pages"
We need to add router base configuration in nuxt.config.js:
target: 'static',
router: {
base: '/<repository-name>/'
}
run git subtree push --prefix dist origin gh-pages
Make sure to delete the current gh-pages branch before running these commands.

Unable to deploy VueJS with Gitlab Pages

I have used Gitlab pages in the past for React deployment and they work well except for VueJS. After following the example here, I'm still unable to generate a website link for my Gitlab page even after GitLab CI pipeline was successful. Can anyone help with this?
This is what the .gitlab-ci.yml looks like:
# .gitlab-ci.yml file to be placed in the root of your repository
pages: # the job must be named pages
image: node:latest
stage: deploy
script:
- npm ci
- npm run build
- mv public public-vue # GitLab Pages hooks on the public folder
- mv dist public # rename the dist folder (result of npm run build)
artifacts:
paths:
- public # artifact path must be /public for GitLab Pages to pick it up
only:
- master
This is what the vue.config.js looks like:
// vue.config.js file to be place in the root of your repository
// make sure you update `yourProjectName` with the name of your GitLab project
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/yourProjectName/'
: '/'
}
After committing and pushing my changes, the GitLab CI pipeline was changed from running to successful. I was expecting to see my website link on Settings > Pages. I clicked on it, but I didn't see it. What could be wrong?
Maybe is a problem of you assets links:
Because normaly in you local host you have all js files in a public folder, where you react or vuejs project join with you .html page with only a /assets/vuejs.files.js, so for deploy you need to rebase you url
This is a documentation for vite project deploy
https://vitejs.dev/guide/static-deploy.html
where explain that you neet to rebase you url, example:
for you localhost:8000/ all files are in localhost:8000/assets/transpiled.vue.js but for deploy you url gona be diferent than https://gitlab.com/<USERNAME>/<REPO> where you base URL is '/<REPO>/'.
Necessary to do it changes, if not you build project will request you assets file into / default base url, but not exist so, will redirect to gitlab and will redirect this again to login, so for this is you problem CORS.

Which command do I use to generate the build of a Vue app?

What should I do after developing a Vue app with vue-cli?
In Angular there was some command that bundle all the scripts into one single script.
Is there something the same in Vue?
I think you've created your project like this:
vue init webpack myproject
Well, now you can run
npm run build
Copy index.html and /dist/ folder into your website root directory. Done.
If you've created your project using:
vue init webpack myproject
You'd need to set your NODE_ENV to production and run, because the project has web pack configured for both development and production:
NODE_ENV=production npm run build
Copy dist/ directory into your website root directory.
If you're deploying with Docker, you'd need an express server, serving the dist/ directory.
Dockerfile
FROM node:carbon
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install
ENV NODE_ENV=production
RUN npm run build
# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build
# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]
in your terminal
npm run build
and you host the dist folder. for more see this video
To deploy your application to prod environment add
"build": "vue-cli-service build --mode prod"
in your scripts in package.json file.
Open your main.js and add
Vue.config.productionTip = false;
right after your imports.
Then open your cli in the project folder and run this command
npm run build
This will make a dist folder in your project directory you may upload that dist folder in your host and your website will be live
If you run into problems with your path, maybe you need to change the assetPublicPath in your config/index.js file to your sub-directory:
http://vuejs-templates.github.io/webpack/backend.html
The vue documentation provides a lot of information on this on how you can deploy to different host providers.
npm run build
You can find this from the package json file. scripts section. It provides scripts for testing and development and building for production.
You can use services such as netlify which will bundle your project by linking up your github repo of the project from their site. It also provides information on how to deploy on other sites such as heroku.
You can find more details on this here
The commands for what specific codes to run are listed inside your package.json file under scripts. Here is an example of mine:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
If you are looking to run your site locally, you can test it with
npm serve
If you are looking to prep your site for production, you would use
npm build
This command will generate a dist folder that has a compressed version of your site.
THIS IS FOR DEPLOYING TO A CUSTOM FOLDER (if you wanted your app not in root, e.g.
URL/myApp/) - I looked for a longtime to find this answer...hope it helps someone.
Get the VUE CLI at https://cli.vuejs.org/guide/ and use the UI build to make it easy. Then in configuration you can change the public path to /whatever/ and link to it URL/whatever.
Check out this video which explains how to create a vue app using CLI if u need more help: https://www.youtube.com/watch?v=Wy9q22isx3U
For NPM => npm run Build
For Yarn => yarn run build
You also can check scripts in package.json file
You write down the below command being at the project root.
npm run build
First Install Vue Cli Globally
npm install -g #vue/cli
To create a new project, run:
vue create project-name
run vue
npm run serve
Vue CLI >= 3 uses the same vue binary, so it overwrites Vue CLI 2 (vue-cli). If you still need the legacy vue init functionality, you can install a global bridge:
Vue Init Globally
npm install -g #vue/cli-init
vue init now works exactly the same as vue-cli#2.x
Vue Create App
vue init webpack my-project
Run developer server
npm run dev
This command is for start the development server :
npm run dev
Where this command is for the production build :
npm run build
Make sure to look and go inside the generated folder called 'dist'.
Then start push all those files to your server.
One way to do this without using VUE-CLI is to bundle the all script files into one fat js file and then reference that big fat javascript file into main template file.
I prefer to use webpack as a bundler and create a webpack.conig.js in the root directory of project. All the configs such as entry point, output file, loaders, etc.. are all stored in that config file. After that, I add a script in package.json file that uses webpack.config.js file for webpack configs and start watching files and create a Js bundled file into mentioned location in webpack.config.js file.
I think you can use vue-cli
If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is making sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework.
If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the dist directory to any static file server, but make sure to set the correct baseUrl
npm run build - this will uglify and minify the codes
save index.html and dist folder in root directory of your website.
free hosting service that you might be interested in -- Firebase hosting.
if you used vue-cli and webpack when you created your project.
you can use just
npm run build command in command line, and it will create dist folder in your project. Just upload content of this folder to your ftp and done.
If you are using npm u can use npm run build but if you are using yarn you can simply run yarn build
If you want to create a build for a domain, you can use the $ npm run build command.
If you're going to build for a sub-domain, follow these instructions:
Create a file that's name is vue.config.js in the root
Write down the below code in the vue.config.js file:
module.export = {
publicPath: '/demo-project',
}
Now run $ npm run build
Note: Use your subdomain name instead of "/demo-project".
If you want to build and send to your remote server you can use cli-service (https://cli.vuejs.org/guide/cli-service.html) you can create tasks to serve, build and one to deploy with some specific plugins as vue-cli-plugin-s3-deploy