I am trying to build a JS application with unit tests.
So when i give npm run build build should be successful only if all the Jest tests have passed.
I have two npm scripts now.
One for testing and one for building production build
"scripts": {
"build": "sudo webpack --mode=production",
"test": "jest"
}
A simple solution which will work with all environments including windows is appending both the scripts with && operator.
So the created new script will be like build:test below
"scripts": {
"build:test": "npm run test && npm run build ",
"build": "sudo webpack --mode=production",
"test": "jest",
}
&&
operator will see to that npm run build will be executed only if npm run test exits with successful return code and jest takes care of returning error code to terminal when any tests fail.
Related
Given the following Dockerfile and package.json, how do I get my image to only have what is defined as production dependencies in the package.json and the one additional dependency defined in the RUN --no-save layer, but not any of the development dependencies?
FROM node:16.14.2-alpine3.15
WORKDIR /opt/asd
COPY ./package.json .
RUN npm install --production
RUN npm install --no-save typescript
{
"devDependencies": {
"express": "4.17.3"
},
"dependencies": {
"ramda": "0.28.0"
}
}
Running docker build . produces an image that has node_modules containing not only the deps I wanted but also the development dependencies. What do I need to change in the Dockerfile to avoid this?
You can use bash conditionals syntax, but you also need to define $NODE_ENV as environment variable:
RUN if [ "$NODE_ENV" = "production" ]; \
then npm install --only=production; \
else npm install; \
fi
I deployed a create-react-app on GitHub Pages using a mix of these 2 tutorials (https://create-react-app.dev/docs/deployment & https://github.com/gitname/react-gh-pages). It's working just fine.
But this webpage is supposed to evolve regularly, I have some content to add.
Is there a way to modify the deployed app? How can I push the changes I would make in my local directory to gh-pages (production mode)? Do I need to run npm build again after my additions?
For the moment I have the development mode on master branch. I think it's the build mode on gh-pages, although I don't have any other branch.
Thank you for your help.
What I did to deploy:
Terminal
$ npm install --save gh-pages
$ git init
$ git remote add origin https://github.com/REMOTE
$ npm run deploy
Package.json
{
"homepage": "https://USER-PAGE.github.io/",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",
},
"devDependencies": {
"gh-pages": "^2.1.1"
}
}
To modify the site just make the changes and then git add, commit and push like one would normally do to the required branch.
Then again run the command:
npm run deploy
I am developing a Vue.js app for a website frontend.
For this app I would like to use Unit and E2E tests. I built my project with vue-cli.
From my understanding, vue-cli uses Karma for unit tests and Nightwatch + Selenium for E2E tests.
My .gitlab-ci.yml looks like the following:
stages:
- test
test:express:
image: node:boron
stage: test
script:
- cd backend/
- npm install --progress=false
- ./node_modules/.bin/jasmine
test:vue:
image: node:boron
stage: test
script:
- cd frontend/
- npm install --progress=false
- npm test
npm test runs e2e and unit tests and works on local computers. The Unit tests run smoothly and the Selenium brings up a Chrome window and uses the E2E tests.
The problem is that don't know how to run E2E Selenium tests on GitLab CI. It keeps giving me an error saying:
Could not connect to Selenium Server. Have you started the Selenium Server yet?, although it says two lines before that it has already created a Selenium server.
How can I run E2E Selenium tests on GitLab CI? If this is not achievable, what kind of E2E can I run on GitLab CI?
CI script:
npm install wget
https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
apt install -y ./google-chrome-stable_current_amd64.deb apt-get
install -y default-jdk
npm run test:e2e:headless
package.json :
test:e2e:headless : "vue-cli-service test:e2e --config ./tests/e2e/main-test/nightwatch.conf.js --env chromeHeadless "
“dependencies”: {
“chromedriver”: “2.46.0”,
“selenium-server”: “3.9.0”
}
nightwatch config :
selenium: {
start_process: true,
server_path: require('selenium-server').path,
port: 4449,
cli_args: {
'webdriver.chrome.driver': require('chromedriver').path
}
},
test_settings: {
default: {
selenium_port: 4449,
selenium_host: 'localhost',
silent: true,
globals: {
devServerURL: 'http://localhost:' + config.devServer.port
}
},
chromeHeadless: {
desiredCapabilities: {
browserName: 'chromeHeadless',
javascriptEnabled: true,
acceptSslCerts: true,
chromeOptions: {
args: [
'headless',
'disable-gpu',
'no-sandbox'
]
}
}
}
You have to bring Selenium yourself to your pipeline in order to use it.
To do so, you should use something like gitlab-selenium-server as it is described in the repo's README.
Another option is to use a GitLab CI service as described in this blog post.
Background
I currently have an npm script that looks something like
"dev":"yarn install && concurrently -k \"npm run webpack\" \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""
Logically this runs webpack, starts the app, lints, and tests in parallel.
npm webpack in that script has --watch set
Note: this is for dev.
The Problems
This tries to run the app before it has webpacked
This won't re-run the app when webpack repacks due to watch
The Goal
Run npm run webpack once
When it outputs (meaning the watch fired and finished) run the other three commands
when something crashes inform me, don't waste time running stuff that won't work, but try again when I fix the file.
The Real Problem
I don't know what I don't know. I suspect the real answer will be in the webpack config itself potentially, or there's a better tool than concurrently/watch for my use case, or the core idea on how I've designed this is just crazy. Maybe I want to create a devServer.js that uses webpack dev middleware to serve these instead? how would that pull in linting and testing then?
I don't know what a beautiful version of this build would look like.
What I Really Need
A great tutorial/guide/blog post about how this 'Should' go.
Here's what I would do; perhaps there's a better way:
"scripts": {
"dev": "yarn install && concurrently -k \"npm run webpack\" \"npm run watch\"",
"watch": "onchange \"dist/**/" -- concurrently -k \"cd dist/ && node App.js\" \"npm run test\" \"npm run lint\""
}
This uses onchange. npm run dev starts webpack and onchange in parallel. onchange monitors for any file changes in dist/ and runs your tasks when any files change.
The limitation of this approach is that your tasks will not run until files change in dist. You can work around this by deleting dist/ before running webpack. (Use rimraf to do this in a cross-platform way.) Example:
"dev": "yarn install && rimraf dist && concurrently -k \"npm run webpack\" \"npm run watch\""
You can just use rm -rf dist if you don't care about Windows support.
I want to start using tslint 4, but the ionic app-scripts does not support it yet: https://github.com/driftyco/ionic-app-scripts/issues/649
I have successfully configured the lint script (in package.json) to run ng lint instead of ionic-app-scripts lint when running npm run lint:
"scripts": {
"build": "ionic-app-scripts build",
"lint": "ng lint",
...
}
However, this change does not impact the build script. The build still runs with ionic-app-scripts lint instead of ng lint.
Is it possible to configure which commands are run in the build script?
Event this question is quite old here is an attempt to this which i always use as it worked for me in different projects:
Chaining of scripts
In your case you could either add the lint to the build or create a new script which does both.
Adding the lint to the build:
"scripts": {
"build": "ng lint && ionic-app-scripts build",
"lint": "ng lint",
}
Creating a new one:
"scripts": {
"build": "ionic-app-scripts build",
"lint": "ng lint",
"linted-build": "npm run lint && npm run build"
}
Make sure you use && to not execute the next script. --> So that build gets not executed if linting failed. If you want to continue anyway you can use a single &.
Hope this information will help you ;)