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.
Related
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"
I try to make the vuetify docs available on my mac local.
I followed the steps in this post: https://stackoverflow.com/a/51293026/15037167
cd /tmp/
git clone https://github.com/vuetifyjs/vuetify.git
cd vuetify/packages/docs
yarn
# option 1 - build and serve
yarn build
yarn start
# option 2 - run dev instance
yarn dev
Every thing works until the step "type: yarn dev".
error: Cannot find module '/vue/vuetify/node_modules/vuetify/dist/vuetify.js'. Please verify that the package.json has a valid "main" entry
I already had problems with the step "type yarn" but I solved this with downgrading node like mentioned in the linked post.
Any ideas?
It seem like you have to install vuetify. (Confuse why I need to install vuetify inside vuetify's source code).
Work around:
yarn add #nuxtjs/vuetify -D
# or
npm install #nuxtjs/vuetify -D
I am using Nuxt with apollo for a project, Everything is working perfectly on a local server but on the live server, the CSS is broken for the plugins I used. I used these two plugins
vue-awesome-swiper
v-lazy-image
plugins: [
{ src: "~/plugins/vue-awesome-swiper", mode: "client" },
{ src: "~/plugins/v-lazy-image", mode: "client" }],
Here is a live demo chatfata.com. as you can see the slider is broken and blur effect in not removing after the image is render.
I am facing one more problem maybe its related to this as it's my first time using Graphql with NUXT.
On the live server, npm run build is not working. it gives some kind of node_modules/babel-loader/lib?? no recognizing the. .gql extension as you can see the screenshot
So I do npm run build on local server and upload the files to live server. I don't if both errors are related
I need help
Thanks
Run this command below:
npm install babel-loader #babel/core
And then run:
npm install && npm run build
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'
}
To deploy our nuxt website in ssr mode we first build and unit test website in the bitbucket pipeline and if tests are green we copy build files from bitbucket servers to our production server and trigger start.
The problem is that Nuxt documentation says nothing about which exact files are required on the server.
currently we are using:
.nuxt/
server/
static/
nuxt.config.js
Sometimes after adding functionality to the website, deployed version throws an error:
Error: Server resources are not available!
At the same time local version works fine.
Also running production server locally on the project works.
Error kinda hints that some paths picked up incorrectly by nuxt.. but the directory structure is completely the same.
Any ideas why this happens and how to fix that?
If errors also mentions, Please check "file path"/.nuxt/dist/server existence.
Then on the terminal
cd .nuxt
check if 'dist' folder exists. If it does not exists,
go back and npm run build. this will generate the 'dist' folder for use.
If Still facing the issue, try,
npm install --save nuxt
npm install --save vue-server-renderer
Try adding: dev: process.env.NODE_ENV === 'DEV' to nuxt.config.js