I made a website in Vuejs, it works on my local browser. I build the page locally and push to gitlab here (https://gitlab.com/ayaderaghul/coi6), and run CI (with folder: public). The page is blank (https://ayaderaghul.gitlab.io/coi6/), the console says:
The resource from “https://ayaderaghul.gitlab.io/coi6/public/static/js/vendor.d5bde172b988351183eb.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).[Learn More] coi6
Loading failed for the <script> with source “https://ayaderaghul.gitlab.io/coi6/public/static/js/vendor.d5bde172b988351183eb.js”.
And I right click the page to View Page Source, the link to css, js files are not found (view-source:https://ayaderaghul.gitlab.io/coi6/)
I have tried the following:
I write commands to build the page in .gitlab-ci.yml
image: alpine:latest
before_script:
- apk add --update nodejs
- apk add --update npm
- npm install chalk
- npm install each-async
- npm install indent-string
- npm install
pages:
stage: deploy
script:
- npm run build
artifacts:
paths:
- public
only:
- master
(https://gitlab.com/ayaderaghul/coi6/blob/master/.gitlab-ci.yml)
I change the css and js paths in file index.html in some ways: /coi6/public/static/css/... or static/css/... ...
None of them works. The behavior is the same. Please give me more options to try? Or more cues to look at? Or explain me something I haven't understood. Thank you,
Your path is wrong in index.html.
Your files are available for example here :
https://ayaderaghul.gitlab.io/coi6/static/js/vendor.d5bde172b988351183eb.js
Whereas you are referencing them here :
https://ayaderaghul.gitlab.io/coi6/public/static/js/vendor.d5bde172b988351183eb.js
Related
It's first time I'm trying to use Actions in GitHub to load a package on npm.
My workflow gets error because of:
npm ERR! code E404
npm ERR! 404 Not Found - PUT https://registry.npmjs.org/github-custom-module - Not found
npm ERR! 404
I noticed that also trying to reach out by browse bar https://registry.npmjs.com/ or http://registry.npmjs.com/ and it responds something like:
{"db_name":"registry","engine":"couch_bt_engine","doc_count":2594600,"doc_del_count":334,"update_seq":12737068,"purge_seq":0,"compact_running":false,"sizes":{"active":52390186030,"external":150891609029,"file":52550172912},"disk_size":52550172912,"data_size":52390186030,"other":{"data_size":150891609029},"instance_start_time":"1640854262658073","disk_format_version":7,"committed_update_seq":12737068,"compacted_seq":12733464,"uuid":"d8db915449574fe1dbb729e34426a075"}
just wondering if someone got in trouble for the same reason and eventually how to fix it!
Thank you very much!
Since your npm package is in a private repo, your Github action may not have access to it. There are two approaches to solving this ->
The easy way
You can use a read only access token in the dependency list in the package.json file to install the packages. This will require changing the code base but it trivializes the CI part. Bear in mind that if the token expires or is deleted your builds will start failing.
The not so easy way
The other way is to again create an access token for the npm registry and then
adding it to the Github Secrets instead. So lets say we store it in
NPM_TOKEN then in your action file you could simply add this to the env
steps:
- run: |
npm install
- env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
You also need to create a .npmrc file in the root of your project with a single line using the env variable to set the auth token.
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
The npm cli will replace the value from the environment in so your secrets are safe !
I have successfully created a Nuxt.js project with this configuration using the CLI:
Project name: test
Programming language: JavaScript
Package manager: Npm
UI framework: None
Nuxt.js modules: None
Linting tools: None
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static (Static/JAMStack hosting)
Development tools: jsconfig.json
Version control system: Git
The developement server runs properly with npm run dev.
npm run build also runs without errors and tells me that:
Ready to run nuxt generate
But the execution of nuxt generate leads to the error Command 'nuxt' not found. This is strange because nuxt seems to be installed when I execute npm nuxt list.
I first reinstalled just nuxt and then all dependencies after deleting the node_modules/ folder, but the error remains the same. If I just run npm run start it tells me
Nuxt Fatal Error
Error: Output directory `dist/` does not exists, please use
`nuxt generate` before `nuxt start` for static target.
This is strange again because the .nuxt/dist/ folder exists.
Does anyone have an idea what is going wrong?
I have solved the problem. For me it works if I run npm run generate instead of nuxt generate.
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.
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
I'm using Google Cloud Builder (GCB) to build some Node.js code. I'm using npm's new package-lock.json feature to pin dependencies. This works best when using the npm ci command that was introduced in npm#5.7.1. Unfortunately, all of GCB's npm images are currently set to npm#5.6.0
How can I use a different npm version in GCB without creating a custom builder image?
Edit: It may not be the case that all of GCB's images are set to npm#5.6.0, but the one that I need to use (node-8.11.0) is set to this version.
I solved the issue by creating my own container image based on the cloud-builder's npm image.
Dockerfile:
FROM gcr.io/cloud-builders/npm:node-8.11.0
ARG NPM_VERSION
RUN npm i -g npm#${NPM_VERSION}
ENTRYPOINT ["npm"]
cloudbuild.yaml:
steps:
- name: 'gcr.io/cloud-builders/docker'
args:
- 'build'
- '--build-arg=NPM_VERSION=latest'
- '--tag=gcr.io/$PROJECT_ID/npm:latest'
- '.'
images:
- 'gcr.io/$PROJECT_ID/npm:latest'
I ran gcloud builds submit . --config=cloudbuild.yaml from the same folder containing the Dockerfile and cloudbuild.yaml files. This submitted the build to GCB and posted an image in my project's container registry. I then used this image in my other project's cloudbuild.yaml that needed the upgraded npm version, like so:
steps:
- id: frontend_install
name: 'gcr.io/$PROJECT_ID/npm:latest'
args: ['ci']
waitFor: ['-']
After doing this, everything works as expected.