I'm looking to deploy a VuePress site using a Gitlab CI pipeline. I use some plugins via the method Vue.use().
When I build manually on my machine and deploy to firebase it works fine.
When the pipeline is triggered, it passes without issue, however, in the built files there is no trace of the plugins. In the case of Buefy, no Buefy component is generated in the built files.
Here's my EnhanceApp.js file:
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
export default ({
Vue,
options,
router,
siteData
}) => {
Vue.use(Buefy)
}
And here's my .gitlab-cy.yaml
image: node:10
deploy_production:
stage: deploy
environment: Production
only:
- master
script:
- npm install -g firebase-tools
- npm i
- npm run build
- firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN
I tried both Firebase and AppEngine to no avail, as well as multiple docker images.
I'm not familiar with GitLab or firebase, but I suggest that you can try to use Yarn instead of npm. Because currently npm will cause some problems in Vuepress (e.g. make plugin-google-analytics unavailable).
Related
I have a project with two packages:
components/
apps/
Both are built using #vue/cli, and I'm using yarn workspaces to manage dependencies.
Everything is working, except Hot Module Replacement when running the app.
components/package.json: main: dist/components.umd.js
app/package.json: components are a dependency, I import like import MyComponent from 'components'
In dev mode I run two tasks in parallel:
components: vue-cli-service build --target lib --watch
app: vue-cli-service serve
I want to change MyComponent in components/src/ and have it hot reload in the dev server.
However, I can only see the changes when I refresh the page.
I know the Vue cli splits source and vendor js bundles, so I thought this may be the cause of the problem?
Does anyone have any suggestions?
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'm quite new in Vue and maybe my issue is trivial.
What I have to do:
I want to create a Vue component that I can put in a NPM private repo and import it into other projects with a sth like bundle.js file
TLDR:
can't import vue component building by vue-cli-service build --target lib/wc. Importing component I have sth silimar to "export 'HelloWorld' was not found in '../node_modules/hello-world'
long version:
I have asked questions and projects as much as I could. All projects are built by vue-cli without any additional changes.
create new default project vue create hello-world
by default we havefirst component here - src/component/HelloWorld, and for this example this is component which we want to export
using vue-cli-service try to make exportable file.
3a. vue-cli-service build --target lib --name vue-test ./src/components/index.js where index.js is
import Vue from 'vue';
import HelloWorld from './HelloWorld.vue';
const Components = {
HelloWorld,
};
Object.keys(Components).forEach((name) => {
Vue.component(name, Components[name]);
});
export default Components;
3b. or directly vue file vue-cli-service build --target wc --name vue-test 'src/components/HelloWorld.vue'
in both scenarios vue-cli-service generates me file in to /dist folder and I want to believe this file are correct
in both scenarios I can't import this component to another vue project using import {HelloWorld} from 'path/to/folder/or/file'; or require('path/to/folder/or/file'). It seems like bundle files haven't exported member.
what I doing wrong? Should use build --target wc or build --target lib?
If You don't want to create new app to reproduce this issue U can download repo from https://github.com/okosowski/vueTest (project started using vue cli).
git clone
npm install
npm run build-bundle-lib or npm run build-bundle-lib
npm link or simply copy file to exiting vue project
try to import/display HelloWorld
I will be grateful for any help!!!
thanks
node v10.14.2
npm 6.4.1
vue-Cli 2.9.6 (the same on 3.3.0)
other used version in https://github.com/okosowski/vueTest/blob/master/package.json
I was facing the same exact problem while using vue-cli to build and test my Vue component. Fortunately I was able to find the solution after reporting it as a bug to vue-cli issue tracker on GitHub. Turned out there was nothing wrong with the common.js file nor was it a bug.
Anyway... long story short, the existing project you are trying to import into is unable to resolve symlinks (because this is what happens when you use npm link). In order to solve your problem, you need to add the following into vue.config.js in the root folder of the project you are importing into:
// vue.config.js
module.exports = {
chainWebpack: config => config.resolve.set('symlinks', false)
}
Hope this helps. For more info, check out these links:
My issue report in the vue-cli tracker
Webpack configuration: resolve.symlinks
I am trying to pack a web app using Google Cloud Builder.
I already have npm install working in a previous step of the same build.
File webpack.config.js is ready to use and tested outside Google Cloud Builder. It is cloned inside the /workspace in a previous step of this build.
How do I execute webpack command as a build step?
This is how I manage to run webpack inside Google Cloud Builder configuration script.
I had to use the npx in order to execute it using the npm docker image.
This is a step to run webpack and goes inside the file cloudbuild.yaml
# run webpack
- name: 'gcr.io/cloud-builders/npm'
entrypoint: 'npx'
args: ['webpack']
dir: '${_MY_APP_DIR}templates/react_app/build'
timeout: 10s
Assuming you are using webpack version >=4:
webpack --mode=production --config ./webpack.config.js
We're trying to deploy an AngularJS2 application to bluemix but we're missing the folder "node_modules" after the application was deployed to the server. We're using npm to build the application.
I found the following post that is mentioning the problem: (https://developer.ibm.com/answers/questions/181207/npm-install-within-subdirectory-not-creating-node.html)
My question would now be: what's the recommended best practice?
I believe you are installing the node modules using npm install, you also should save those module in your package.json file which you can do that by npm install --save.
The recommended best practice would be to Setup a Build Pipeline.
There could be 3 stages or more:
Build Stage: It builds the app so doing things like npm install there so your folder node_modules gets created for you.
Test Stage: Tests the app so doing things like npm test would run all the tests in your app
Deploy Stage: Once build and deploy stage runs successfully, Deploy will actually deploy the app to the Bluemix domain.