Separating a Build and Test on Jenkins - angularjs

I have a angular application which i develop using source control ofcourse (gitlab), I recently integrated it with jenkins so that everytime i push to my git it triggers a build. In my jenkins i created a job that pretty much builds the application (installs dependencies) and runs test. Following is what my execute shell looks like in my job.
export npm_config_prefix=.npm/
export PATH=.npm/bin:$PATH
npm install -g bower grunt-cli
npm install
bower install
gulp test
Now the issue is that I do not want to build and run test as a same step i want them to seprate. So how do i achieve this ? Do i create a new job and add gulp test in the execute shell of the new job ? Or is there some other approach. I am new to jenkins and CI in general so was wondering what would be the approach in this situation ?


As you have found, Jenkins is a super advanced shell script runner to take the boring part out of repeatable steps in the build process.
The next step is to hunt down plugins to do those steps for you in a cleaner way. This is where plugins come in
These is a Node Plugin which will install npm packages outside the job so you don't have to do the npm install -g step every single job
You would want to keep the build step as shell
npm install
bower install
gulp test
I think that is your concern because you only need to run the job if the code has changed, including local dependencies. You could add a second shell step and just have the tests in there as it will run in the same workspace but all the build logs will be in one place
You didn't say what test runner your using but you will probably find a publisher step which will bring that into Jenkins for you xUnit plugin covers quite a few runners so might work for you
And this is the tutorial on installing plugins into Jenkins

Related

How to give next js app build to the client

I am new on Next JS, I have created a small application. It is using API calls and more features.
During development, Using the command as npm run build I am able to create .next folder as build and using npm run start I am able to run that build.
Now the client is asking for build, so what should I send to him? Either complete project and ask him to do the
npm run build and npm run start (which I don't think so)
or only the .next folder. But how he will run this build?

Open package.json in your editor and add the following export script to the file:
"export": "npm run build && next export -o _static"
run this code in the terminal:
npm run export
Open _static folder and there is all of your file.

Some possible ways of sharing your project:
You can easily build and host your project with services like vercel or netlify. Easy and quick. Check out the vercel CLI in particular.
Your client can clone the git repo, install all dependencies, run build, and run start. This'll start a production server. Check here: https://nextjs.org/docs/api-reference/cli#production. Bad idea if your client is not a dev.
You can build your project and send the output to your client, which he/she can then view by spinning up a server (python simpleHTTPServer, Mamp). Also a bad idea if your client is not a dev.
Long story short, host your project somewhere and send them a production URL.

npx create-react-app takes too long every time

I am new to React. Whenever I use npx create-react-app, it takes too long to download all the packages like "react, react-dom and react-scripts". Is it what happens every time or is there something that I can do to so that it doesn't take too long every time.

There are few factors which might have an impact on the performance of npm or npx commands in general.
Hard disks (mostly 5400RPM) ones bottleneck the I/O performance and thus causing installation process to slow down.
Internet connectivity issues - slow internet or high latency.
The terminal used also plays a crucial role. For example, Git Bash is known to have better performance than the Command Prompt on Windows platform.
Solution
Install CRA globally. npm install -g create-react-app and create-react-app my-app. Make sure you regularly update the package to ensure latest patches are applied.
Optionally, You can try OS level optimizations such as disk defragmentation to ensure there are no bottlenecks. Upgrading to an SSD would yield better performance.
You can use Yarn which in my experience, has better I/O performance. Similar to npx, Yarn has yarn create. You can do yarn create react-app my-app to create a React app.

npx always uses the latest version so it downloads packages each time you want to create new app so you should check your connection, otherwise you can use npm install -g create-react-app, it is not recommended though. see instructions for older npm versions

So, there are two fixes for this,
FIX 1:
This problem is observed with 12.16.2-x64.msi node version. If you installed x64 version then you just need to uninstall this version and install x32 bit version. Or try updating to the latest version.This fix should solve your problem.
FIX 2:
If you don't want to reinstall the node and continue with the current version then this fix would work.
Open a new cmd window and run resmon command. This command opens resource monitor and you would see something like this -
Once you could see the resource monitor. You need to start looking for cmd.exe processes (because there would be more than one cmd.exe based on how many windows you have got open) which are suspended.
If you find any cmd.exe suspended resume it. Your cmd process would also get resumed. There might be a case where cmd again stops, you just follow the above steps again.
Sometimes you may need to resume cmd.exe multiple times if it's suspense. And make sure you disable your anti-virus, it may prevent creating react npm app.

You might use local cache for npm packages. There is an open source cache, should be relatively straightforward to use. Install the cache software, and configure it. Basically it uses disk space, to trade for faster speed. If the bus (net) betwene your machine and the cache is faster than your Internet connection to npm repository, the cache is useful.
These caches act as in-between, they sit between you (your "yarn" or "npm" which wants to install a package) and the npm repository. The cache checks, whether it already has the package on its disk, and if so, serves it faster than the actual npm repository. Check out eg:
https://github.com/mixu/npm_lazy

Install react globally using the following command
npm install -g create-react-app

I faced the same issue and able to fix it like below.
Issue:
My organisation had set different repository URL in the global config when I run setup scripts for dev environment.
I was using work laptop to do something else and it was the problem.
How to check
Run this command
cat ./~npmrc
You should see something like this
registry=https://blah blah/npm-all/
change this to default registry by running the command
npm config set registry https://registry.npmjs.org/
check the same
cat ./~npmrc
Now run the command to create react app
npx create-react-app --template cra-template-rb app-name

As a beginner to create several sample react apps, I followed the following method to avoid the delay and save disk space by not duplicating the node_modules folder.
Create your first react app my-react-app in the usual way.
When you want to create another project, create just a folder say new-react-app first.
Open the my-react-app folder and copy everything except the node_modules folder to the new app folder.
Cut and paste the node_modules folder into the new folder. (Cut and paste is instantaneous and it avoids duplication)
now run 'npm start' in the new folder.
For completeness (not needed for example projects), edit the package.json and package-lock.json files to change the names to new-react-app.
package.json:
{
"name": "new-react-app", //"my-react-app",
...
package-lock.json:
{
"name": "new-react-app", //"my-react-app",
...
"packages": {
"": {
"name": "new-react-app", //"my-react-app",
...
If you want to run the old project again, cut and paste the node_modules to that folder and run 'npm start' there.
Periodically remove my-react-app and create a new my-react-app. Follow the same method till it works!

run resmon command from command line
look for the cmd process if cmd process is suspended the resume the process, it worked for me.

Error on running a project after installing a package

I was running my project finely, but I merge my code with other which contain a package called react-modal, after that my code doesn't work. I revert that code from my project, but it doesn't work, I can't even run my project. "cannot read properties of undefined" error is occuring. I upgrade all my packages like webpack, webpack cli etc, but it doesn't helps. What I need to do to run my project?

Well you can do two things here.
First to revert your code back to your latest code before merge.
Run the below command to delete Node_modules npm prune --production
and then run npm install and then build your project.

For react-admin-demo is it compulsory to do complete build of react-admin

For react-admin-demo is it compulsory to do complete build of react-admin.
As per documentation it goes through clumsy make process.
Have anybody installed the folder itself by just npm install and run?
Any hints on how that can be simplified, to fork and create my own project?
Reference: https://github.com/marmelab/react-admin/tree/master/examples/demo

This is a mono repository which includes many packages. It uses learn and yarn workspaces. You'll have to use yarn.
There are several scripts inside the main package.json file which can help you start contributing without make. Each package inside packages can be built by running yarn build inside its folder.
To build all packages in one command, you can run ./node_modules/.bin/lerna run build inside the root folder.

Yeoman - Errors With Grunt Server Command

I already have npm and git installed on my Ubuntu machine.
I followed the instructions below when installing Yeoman and the generator-angular.
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower (step by step tutorial)
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
My ultimate goal is to lauch a simple app using twitter bootstrap, so I can take advantage of their pretty UI. :D
However, when I get to the portion to run grunt server (recently replaced by grunt serve), I get a rediculous number of errors:
I was previously suffering from the issue described below:
Cannot install yeoman because 'generator-karma does not satisfy its siblings peerDependencies
https://github.com/yeoman/yeoman/issues/1065
Luckily I was able to work around it by running npm uninstall -g generator-karma && npm install -g generator-angular and then sudo npm install -g yo grunt-cli bower.
However, now I've hit a wall with grunt appearing as if it's not installed at all.
Does anyone know if there is a specific location where grunt should be installed?
Should I install it globally (using -g)?
Should I not install it globally (using -g)?
I don't understand what I'm doing incorrectly, but it must be something fundamental because the process is intended to be automated and simple.
Any ideas?

This looks like something npm install would fix. Looks like some of your dependencies didn't install.
Try it first without -g.

The problem definitely has something to do with compass and ruby. I was able to quickly build an angular app using yeoman when I opted not to install compass/sass for the app when prompted after typing yo angular at the terminal. After following the suggestions in this post, the last error I got was the following error:
Warning: /home/ubuntu/.rvm/rubies/rubie-2.1.1/lib/ruby/2.1.0/rubygems/core_ext/kernel_req‌​uire.rb:55:in 'require': cannot load such file -- compass (LoadError) from /home/ubuntu/.rvm/rubies/rubie-2.1.1/lib/ruby/2.1.0/rubygems/core_ext/kernel_req‌​uire.rb:55:in 'require' from /usr/bin/compass:20:in 'block in ' from /usr/bin/compass:8:in 'fallback_load_path' from /usr/bin/compass:19:in '' Use --force to continue Although, --force doesn't help.
but fixed it by simply following these instructions.

Resources