DEV Community: Tung Nguyen

Deploy Jenkins job from the command line and chrome notification for job result

Tung Nguyen — Sat, 18 Apr 2020 14:14:59 +0000

Reason:

Current my daily tasks are:
1. Develop feature
2. Create a git merge request
3. Create a git tag
4. Go to Jenkins site and deploy to a specify env and git tag above
5. Wait for Jenkins build result
So, I think I can make the process at step 4 and 5 more automatic

Solution:

A script for deploy Jenkins from the command line
- So we no need switch to Jenkins page, now you can do everything on you IDE
A chrome extension for notifying when build success
- Another solution is set up a webhook for Jenkins so it can send the result to Slack or Mattermost group. But I think it still makes spam for me, I just want to notify on some projects.

Preconditions:

You must have Jenkins username and API token
- API token get at Configure tab on the account info page

Script for deploy Jenkins from the command line

It uses Jenkins API for send deploy request
Basically, all of it is do this command

curl -v -X POST https://jenkins.com/job/admin-apibuild \
  --user yourusername:yourapitoken \
  --data-urlencode json='{"parameter": [{"name":"Environment", "value":"test"}, {"name":"COMMIT", "value":"dev"}]}'

Value of parameter depend on the config of your Jenkins job
I wrapper above curl command to Javascript file, so you need Node to run
We can run a command like node scripts/deploy.js dev v1.1.1
- You can custom to correct with your Jenkins config
Source code at https://github.com/tungnt620/jenkins-auto

A chrome extension for notifying when build success

How it works

We have a monitor server which uses for interval fetch status of jobs
- We choose jobs to want to monitor
This monitor server also serves an API get notifies which used by chrome ext
Chrome ext interval fetch notifies from the monitor server and displays it.

Setup

You can see detail at https://github.com/tungnt620/jenkins-auto

The end

I think one way to boot productivity is to avoid context switch as much as possible.
If you have any other ways, solutions please share with us

Recap about Webpack

Tung Nguyen — Fri, 29 Nov 2019 03:51:16 +0000

What is Webpack?

Webpack is a module bundler, it helps pack our application from multiple files to one or a few files which can run on target environments ( ex: web browser).
For example with a modern react application, we have many files: css, scss, fonts, image, js, jsx and in each file we also import/use other files. Webpack help we pack their files together in a bundle file and it can run in the web browser

Why we need Webpack?

Assume we don't have Webpack or any module bundler and we have a react web application.
To our web can run in a web browser correctly, at least we need:

index.html file
in index.html file need a script tag with a link to React library source
in index.html file need a script tag with a link to React DOM library source

Depend on the requirement, usually, we need style ( add some stylesheet tags to link to css files), other script tags to other libraries. In a complex project, it very hard to manage
Webpack can help us by let we easy define the relationship in our's app by use import statement, Webpack will auto pack code need for our's app run

How Webpack work?

Internally, Webpack begins at an entry file ( usually index.js file ) and from this file, it builds a dependency graph of our's application. From this graph, Webpack can produce a bundle file have all resource, code, library necessary for app run.
With every import, it is a command say Webpack that is a dependency.

Components of Webpack

Entry:
- Use to indicate where Webpack begin to build dependency graph
Output
- Use to indicate where and name of bundle files
Loaders
- By default, Webpack only understand and bundle JS and JSON file
- Loader help Webpack can understand other file types and build dependency graph
Plugins
- This component helps Webpack can do tasks like bundle optimization, asset management, injection of environment variables, minify, ...

Conclusion

Webpack have many loaders and plugins help we build a modern application ( not only web it can use to bundle other application like Rail, ... )
We also can write custom loaders and plugins to extend function of Webpack (like)

Distinguish Babel and Webpack

Tung Nguyen — Wed, 13 Nov 2019 06:55:34 +0000

Sometimes I still confuse about Babel and Webpack, so I noted this for reference reason

Babel

Not all new feature of JS support by all browsers, Babel compile source code to version which can work on any browser

Webpack

It is a bundler for JS and static files. It packs many files, modules into a few files
It also has some function like code-splitting, lazyloads help make our's app more effective
It also allows we can write custom packing logic with "loader" plugin

Summary

Usually, in the modern web application, Babel and Webpack used together