It seems that vite build command doesn't run tests (unit tests written with vitest, for example) before building the application for production. This is quite unsafe.
Is there a way to configure vite build to run tests before trying to build ?
I couldn't find anything in Build Options.
What do you have in your package.json, scripts section? Don't you have some test or alike?
build is used to bundle your app and ship it to production. It's not supposed to run any tests by default.
You could achieve this by doing something like
"scripts": {
"build": "vite build && npm run test:unit && npm run test:e2e",
"test:unit": "vitest --environment jsdom",
"test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
},
If you generate a new project via the CLI, you will have most of them already written for you, then it's a matter of properly chaining them with && to assure that they are all succeeding before proceeding further.
You can also add some Git hooks with something like husky + lintstaged so that your flow is using something by default before even pushing it to a remote repo.
Otherwise, it's part of your CI. Either it be a Docker compose file, some Github actions, Gitlab pipelines or anything your devops team could have setup for your deploy environments.
Related
I have a monorepo with several workspaces within it. It has been very common for me to use chained npm scripts for simple tasks instead of using a task runner. So for example, the following configuration (pseudo code) is very common for me and usefull as well, specially for pre and post build scripts
"scripts": {
"prebuild:task1":"task1 --task1-arguments",
"prebuild:task2":"task2 --task2-arguments",
"prebuild": "npm run prebuild:task1 && npm run prebuild:task2",
"build":"build-script --build-arguments",
}
So the above is the package.json for the child worskpace itself and then in the master package.json I have the call to the script that triggers the build for that workspace.
build:packageA: "npm run build -w packageA"
All seems working well but the chained "npm run script" inside the workspace is actually execute in the context of the master monorepo and not inside that particular workspace.
So, in summary, the first call is to run the build script in the workscape and then triggers the prebuild script of that workspace BUT as that script execute chained npm run scripts those are run in the context of the master repo which happens that they don't exist in there. So the callstack might be ...
(master) build:packageA
(packageA) prebuild
(master) npm run prebuild:task1 >>>> EXIT ERROR
The only way I found, up to now, to bypass this issue was to make my child workspace a monorepo itself holding zero woskpaces. Essentially I have a "workspaces" key in its package.json pointing to the root directory. This enables me to use the -w flag in the scripts section so to refer all scripts to itself. So my current workaround looks like this ...
"workspaces": ["."],
"scripts": {
"prebuild:task1":"task1 --task1-arguments",
"prebuild:task2":"task2 --task2-arguments",
"prebuild": "npm run prebuild:task1 -w packageA && npm run prebuild:task2 -w packageA",
"build":"build-script --build-arguments -w packageA"
}
Isn't there already a better way to solve this?
Thanks in advance to everyone!
Following this post https://stackoverflow.com/a/67060676 I found out that npm changed the way it calls nested scripts in workspaces.
I ran into similar issues like you while running npm#7.5, but the feature was introduced in npm#7.7. Updating node to v17 and npm to 8.3 resulted in everything is running as intended.
In my case I wanted to execute nested npm run build commands in workspaces.
I have run the command
yarn add -D jest to install jest to my project.
This does successfully add jest to my node_modules
> find . -name jest
./node_modules/.bin/jest
./node_modules/jest
When I use iterm2 to run jest however I get the following output
> jest
zsh: command not found: jest
FWIW When I use the IntelliJ terminal it does work
> jest
Determining test suites to run...^C
What am I missing in the iterm environment to be able to have node_modules bin in my classpath depending on the current repo?
An OS shell doesn't know about your locally installed node_modules, but IntelliJ terminal does. So if you want to run jest from outside of an IDE you should perform several additional steps.
The most common way to run locally installed packages is to define a separate script in the "scripts" section of your package.json file. Then you will be able to run it using the yarn/npm itself from any terminal. You can find an exact example in the Yarn docs.
{
"name": "my-package",
"scripts": {
"test": "jest"
}
}
yarn run test
Or you could install jest globally so it will be accessible from anywhere, but it's not a best practice.
I have a create-react-app. It works great, however, where does the output to npm start get served from, i.e, what is the path on disk? Or does it get served from memory?
I would like to serve that output from IIS to avoid some cross-origins issues with a webservice I am calling but I can't find the physical disk path where npm start is being output.
I would run npm run build every time but it takes a solid 2 minutes and I want the faster build time of the non-optimized build for debugging.
create-react-app uses react-scripts to compile the code. Have you considered setting up dev environments?
First:
$ npm install dotenv-cli --save-dev
package.json
{
...
"scripts": {
...,
"build": "react-scripts build",
"build-dev": "dotenv -e .env.development
react-scripts build",
...
}
...
}
Alternatively, you can run this command and use webpack or something else to bundle
npm run eject
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc.) into your project as dependencies in package.json. Technically, the distinction between dependencies and development dependencies is pretty arbitrary for front-end apps that produce static bundles.
In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in package.json as you see fit.
All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
I am new to npm run scripts can I do the following tasks using only npm run scripts? (i.e without any task runner like gulp and grunt)
concat js
scss to css watch
get notified about succesful js concatenation and scss to css conversion
and moving only html, css, js to deployment directory
Any help would be greatly appreciated!
I don't see why not? To give you a little context:
npm run scripts allow you to easily run: any custom script you create, or any script provided from within your node_modules directory. This is exactly what any task runner is providing you with: i.e. custom scripts to accomplish common development tasks, they have just premade these scripts whereas with npm run scripts you're creating them yourself. These npm scripts are created by adding them to the "scripts" field within your package.json file and can be executed by typing the following: npm run <script-name>.
How are we able to just run the binaries of locally installed packages?
Well, the binaries of locally install packages are made available to you courtesy of your PATH environment variable. This is extremely convenient and allows you to run said binaries simply by typing the the name of said package instead of having to point to: node_modules/.bin/<node_module>. Furthermore, to see which scripts are available to you issue a: npm run
Ok back to your question.. Yes you'll will just have to create custom scripts utilizing various libraries to accomplish said task.
For example, scss to css watch, you could create a script like so:
"scripts": {
"buildscss": "sass --watch app/sass:public/stylesheets"
},
Alternatively, you could use node-sass to handle this task:
npm install --save-dev node-sass
"scripts": {
"buildscss": "node-sass --output-style compressed -o dist/css src/scss"
}
To serve and automatically inject changes you can utilize browser-sync. Something like the following:
npm i -D browser-sync
"scripts": {
"serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'"
}
Alternatively if you only want to move html, css, js to a deployment directory, <dist> in this case, you could do the following:
"scripts": {
"copy": "cp <html_dir> dist/ && cp <css_dir> dist/ && cp <js> dist/",
}
As for your question about notifications: your custom script would run other custom scripts and print to the console the outcome of said script. There is much more that you can do with npm run scripts, such as: linting, watching, combining scripts, etc.. For a great tutorial check out this link as I am just scratching the surface.
Hopefully that helps!
I am very new to Atlassian Bamboo build CI. I want some help from you guys.
My Job is to make a continuous integration build plan for my reactjs application. So I started with Bamboo.
Now my application test cases are written in JEST framework.
In my (local machine) react application when I test the test cases locally I use the following command
"yarn test"
I installed yarn inside Bamboo by "npm install yarn"
My requirement is whenever I will merge my code in GitHub an automatic build will be triggered in Bamboo and if the test cases are passed then it will deploy the code..Now the build plan is getting triggered when ever I merge the code it GitHub (Because in step 1 of the build plan I made a job to checkout code from my GitHub repo)
But I am not understanding how to tell the build plan to run "yarn test" my test cases using JEST framework.
The question might look very easy for you guys...so please help me..
The agent (local or remote) running your builds needs:
Nodejs installed
npm installed - typically by the nodejs install
yarn installed globally (npm i -g yarn)
Then you can use as a script task to run the yarn test command.
You can build on this be seeing if there are plugins that abstract the script task into some sort of yarn task and you can look at processing the test results in Bamboo so that the builds show the test results and fail/pass the build accorindly.