Nuxt taking more than 1 hours to Build - vue.js

I'm building a Nuxt application. I've done some research but found no definitive solution.
Step 6/8 : EXPOSE 8080
---> Running in e5d36d6e86fe
Removing intermediate container e5d36d6e86fe
---> f655ef5cccc2
Step 7/8 : RUN npm run build
---> Running in f6445150af4c
> nuxt build
ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
ℹ Using components loader to optimize imports
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
ℹ Warming up worker pools
✔ Worker pools ready
ℹ Compiling Client
✔ Client: Compiled successfully in 1.00h
ℹ Compiling Server
✔ Server: Compiled successfully in 1.81m

Update Config
There are several experimental ways of improving build speed.
https://nuxtjs.org/api/configuration-build#parallel
https://nuxtjs.org/api/configuration-build#cache
https://nuxtjs.org/api/configuration-build#hardsource
build: {
// standalone: true,
analyze: false,
parallel: true,
cache: true,
hardSource: false,
splitChunks: {
layouts: false,
pages: false,
components: false,
},
html: {
minify: {
minifyCSS: false,
minifyJS: false
}
},
loaders: {
vue: {
prettify: false
}
},
transpile: ["#coreui/vue", "#coreui/utils", "#ag-grid-community/vue"],
extend(config, ctx) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? "source-map" : "inline-source-map";
}
}
}
Dockerfile
FROM node:14
COPY package*.json ./tmp/
RUN cd /tmp && npm install
RUN mkdir -p /usr/src/app && cp -a /tmp/node_modules /usr/src/app
WORKDIR /usr/src/app
COPY . .
#COPY package*.json ./
#RUN npm install
EXPOSE 8080
RUN npm run build
# RUN npm run generate
CMD [ "npm", "run", "start" ]

Related

Semantic release not publishing correct folder

For the past few days, I'm trying to publish my package to github by using semantic-release. Unfortunately, I can't publish the correct folder as source code (zip) file in my npm package hosted on github.
My github action pipeline:
on:
push:
branches:
- main
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
defaults:
run:
working-directory: ./frontend
jobs:
release:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
with:
node-version: 18
cache: 'npm'
cache-dependency-path: ./frontend
- name: Install packages
run: npm install
- name: Build frontend
run: npm run build
- name: Copy json file to dist dir
run: cp package.json ./dist
- name: Run semantic release and publish package
run: |
cd ./dist
pwd
npm run semantic-release
It's supposed to publish the dist folder, but I see the whole project directory as the source code output to npm. It's not publishing my build folder. When I run pwd, I'm on the correct path: /home/runner/work/test/test/frontend/dist
Semantic-release is also not respecting my property in my package.json file:
"files": [
"/dist"
]
I specifically want to output the dist folder, but unfortunately, everything is in the output folder except the dist folder.
I also tried adding a pkgRoot property to to the '#semantic-release/npm' module, but still! No dist folder being published.
['#semantic-release/npm', { 'pkgRoot': './dist' }],
What can be the issue of this problem?
I was also having this issue yesterday and this is what worked for me. Notice that I omitted a lot of configuration stuff from the files mentioned not to "bloat" the answer. Let me know if this works for you!
package.json
Remove the "files" key.
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/package.json",
}
semantic-release/npm configuration
"#semantic-release/npm", { "pkgRoot": "./dist" }],
semantic-release/git configuration
[
"#semantic-release/git",
{
"assets": [
"package.json",
"README.md",
"CHANGELOG.md",
"dist/**/*.{js}"
],
"message": "chore: Release ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
}
]
tsconfig.json
"compilerOptions": {
"rootDir": "src",
"outDir": "./dist",
}

vue config devServer proxy is not working in development mode

i have added devServer proxy target as
devServer: {
proxy: {
'^/': {
target: 'https://xmlpi-ea.dhl.com/',
ws: true,
changeOrigin: true
}
}
}
but it is not working when i make build with npm run build, is there a workaround for it?
This is for PRODUCTION not for development.
npm run build
If you are using vue-cli, you can spin you development server with
npm run serve

Vue CLI 3 remove console.log and code comments with Terser

I'm using VUE CLI 3 and I need to remove the console.log and code comments from the production built. This is my Terser setup:
webpack.config.js in src folder
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {drop_debugger},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
],
},
};
My production workflow: Run npm run build -> cd dist -> npm run serve
The production build still outputs all console.log statements and shows code comments (<!-- -->).
What do I need to change to remove them?
First of all: make sure you are configuring Terser correctly:
terserOptions: {
ecma: 6,
compress: { drop_console: true },
output: { comments: false, beautify: false }
}
npm run serve
is usually a shortcut for:
vue-cli-service
vue-cli-service --help
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
lint lint and fix source files
So when your workflow is the above mentioned npm run build -> cd dist -> npm run serve then you are actually starting the dev server, which does not apply Terser.
In order to run the production build you can use any webserver capable of serving static content:
NodeJs examples:
npm install -g serve
serve -s dist
or
npm install -g node-static
static dist

Webdriver instances not created for custom protractor.conf file

I want to integrate my E2E suite in Travis, so I followed this article. As mentioned in the article I've created a custom protractor.ci.conf.js file of the Travis build. I've placed this file inside my e2e folder (path: e2e/protractor.ci.conf.js).
The only difference in my custom e2e/protractor.ci.conf.js and angular generated protractor.conf.js files is the value in args property displayed below.
e2e/protractor.ci.conf.js
chromeOptions: {
args: [
'--headless',
'window-size=1920,1080'
]
}
protractor.conf.js
const SpecReporter = require('jasmine-spec-reporter').SpecReporter;
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
shardTestFiles: true,
maxInstances: 2,
'browserName': 'chrome',
chromeOptions: {
args: ['--start-maximized']
}
},
directConnect: true,
baseUrl: 'localhost:4000/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 300000,
print: function () {
}
},
useAllAngular2AppRoots: true,
onPrepare: function () {
jasmine.getEnv().addReporter(new SpecReporter());
require('ts-node').register({
project: 'e2e/tsconfig.json'
});
}
};
In my package.json file there are 2 scripts one for running tests locally and one on Travis.
Package.json (at the same level where protractor.conf.js is located)
"scripts": {
...
"test": "ng test --watch=false",
"pree2e": "webdriver-manager update",
"e2e": "concurrently --kill-others \"ng e2e --port=4000\" \"npm run _server:run\"",
"e2e:ci": "concurrently --kill-others \"ng e2e --port=4000 --protractor-config=e2e/protractor.ci.conf.js\" \"npm run _server:run\"",
"_server:run": "tsc -p ./server && concurrently \"tsc -w -p ./server\" \"nodemon dist/server/index.js\" ",
...
},
.travis.yml
branches:
only:
- staging
- prod
- functional-testing
script:
...
- if [[ $TRAVIS_COMMIT_MESSAGE == *"[skip e2e]"* ]]; then echo "skipping E2E test"; else npm run e2e:ci; fi
...
before_deploy:
- sed -i '/dist/d' .gitignore
- git add . && git commit -m "latest build"
- cd $TRAVIS_BUILD_DIR/dist
PROBLEM
When simply running npm run e2e, every test is working fine. But when I'm using npm run e2e:ci command scripts hangs and no instance of WebDriver runs.
I/launcher — Running 0 instances of WebDriver
is coming instead of 1 or 2 instances.
That's because since you made a new config file and apparently placed in the folder
/e2e instead of the default root folder.
The path to the test files in your case should also be updated.
So './e2e/**/*.e2e-spec.ts' will get changed to './**/*.e2e-spec.ts'
Since, currently the test is not able to find any files specified, it doesn't run any instances.

PhantomJS timeout issue when running in headless mode in GitLab CI

I am trying to use GitLab CI to run some client-side unit test written using QUnit. Now to run the Qunit test I am using the grunt-contrib-qunit plugin. To run these tests in headless mode I am using this plugin which hosts it on a localhost server in a console and runs all unit tests. When running this project locally I am successfully able to run all the unit tests but when I checking in my code which kicks of the CI process, on GitLab, it fails on starting the phantomjs server and gives timeout error. I am also providing the jsbin link of the two text files which are basically the output of the unit test from my console. One file is of my local system and another is from the GitLab CI that runs on GitLab website when I check-in my code.
Local Console Output File Dump
Gitlab CI Output Dump
Adding my gitlab-ci.yaml file
image: node:4.2.2
before_script:
- dir
- cd sapui5_repo
- dir
- cd app-with-tests
build:
stage: build
script:
- npm i
- npm run test
cache:
policy: push
paths:
- node_modules
artifacts:
paths:
- built
Also adding my gruntfile if that helps
/* global module */
module.exports = function (grunt) {
grunt.initConfig({
qunit: {
all: {
options: {
timeout: 9000,
urls: [
"http://localhost:9000/webcontent/test/unit/unitTests.qunit.html"
]
}
},
//all: ["webcontent/test/unit/unitTests.qunit.html"],
options: {
timeout: 2000,
}
},
connect: {
options: {
//open: true,
},
first: {
options: {
port: 9000,
//livereload: 3500,
base: "./"
}
},
second: {
options: {
open: {
target: "http://localhost:9000/webcontent"
},
keepalive: true,
port: 9000,
livereload: 3501,
base: "./",
}
}
},
});
grunt.loadNpmTasks("grunt-contrib-connect");
grunt.loadNpmTasks("grunt-contrib-qunit");
grunt.registerTask("test", [
"connect:first", "qunit"
]);
grunt.registerTask("default", [
"connect:second"
]);
};