DEV Community: Yuqing Ma

One year of using Ubuntu as daily Operating System from Microsoft Windows

Yuqing Ma — Tue, 01 Aug 2023 06:23:19 +0000

Background Information
Firstly, personal information about myself, I am a software developer and uses computer mainly for writing codes and internet surfacing. Sometimes, I cut video and edit photos. Secondly, computer hardware information, CPU is Ryzen 5 2400G and GPU is Radeon RX 470. I built the computer from parts and forgot about the wireless internet, so I use a usb plugged WIFI internet card instead.

General Taste
I don’t want to use Microsoft Windows 11 anymore, unless I have to do it.
Pros of Ubuntu
It is clean. The desktop is clean. The background app is clean. The menu is clean. In Windows 11 System, there is a weather widgets. For me, it is the most useless and annoying feature on the taskbar. When the mouse is over the weather section, a window jump out and cover a third of my screen, containing advertisement and outdated news from old media. There are also advertisement start menu of classic Windows. In Ubuntu there are zero
advertisement and no such hover over window like weather widgets. In Windows 11, all the apps try to get a place at the desktop if not it will be tricky to find them. Then the desktop becomes crowded. Also many apps want to start when the operating system boost up. I know that I can set them not to do it, but sometime they start in the background. Then I find out my computer becomes mysteriously slow down. It need to be cleaned out and reset manually.
Here it is my desktop.

It does all the tasks I demanded. It is capable with all the code editing program and has basic apps such as browsers, LibreOffice, printer drivers, database management and social medias… We use more and more online editing also. For example, google drive is able to edit all documents. Canva is great for videos and photos and more. There are also free and more powerful with AI assistance.
Due to its free and open-source Linux-based operating system, the system’s tools are more user friendly than Microsoft. Here is an example of screenshot.

Cons of Ubuntu
It takes time to adapt it. It requires users search information online to install apps and drivers. It could be pros if you want to learn how Operating System and software works behind the sceens.
It doesn’t have video games. Also, it could be pros if you want to be effective and get ride of addiction.

Webassembly Study Guide

Yuqing Ma — Mon, 01 May 2023 01:02:26 +0000

Introduction
This article is only focusing on the future and advantages of Webassembly, but telling you the condition of
implementation for Webassembly in nowadays development.
Webassembly is a low-level language, unlike Python or JavaScript, so it is difficult to learn. It is newly
developed and lack of implementation such as, Exceptions or Closures, so the developer has problems to
translate some code from C or JavaScript directly to Webassembly. Therefore, if you want to use it in
industrial world, for client side, it is better to use AssemblyScript, which is built on WebAssembly , and its
packages. Also it is recommended to combination of languages and platforms for large applications. For
backend server, Webassembly is only a binary program and does not include an operating system
environment. We cannot replace Docker with it. At the same time, it is still suggested to use certain functions
or AI (TensorFlow) due to its properties.
AssemblyScript
It is easy to learn AssemblyScript as long as you learned TypeScript and JavaScript. Keep in mind that they
are only syntax similar and the basic logic is different. AssemblyScript provides standard low-level functions
that map directly to WebAssembly. Without AssemblyScript, developers need to use C, GO or Rust to achieve
the Emscripten function. With help of JavaScript framework, such as Vue, React, Angular, you can install the
AssemblyScript written package Lume, a 3D WebGL library. (https://github.com/lume/glas) Since the
WebAssembly takes less time and memory for animation and
video process, the website can be more efficient.
Compiling to WebAssembly
From the official website https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm, you can learn
how to setup environment and compile C to wasm file, which is binary file can be imported directly to JS file.
The tutorial on Youtube from Michael Grieco (https://www.youtube.com/watch?
v=RSLHrmDL4kU&list=PLysLvOneEETPM_YbEyZcJ35_3pSdrj33O&index=2&ab_channel=MichaelGrieco)
is great for beginner to learn the concept and use of C to wasm.
Conclusion
If you need a fast development for simple website and deal with small amount of user, you can scape
WebAssembly and keep using Docker. However, with the implementation of VR devices, the future website
requires lots of animation and 3D video process. WebAssembly will be the lead technology in this field.

How to use v-model in render function vue 3 composition API?

Yuqing Ma — Thu, 16 Feb 2023 18:52:30 +0000

Introduction:
This article focus on v-model in render function with two kinds of components, custom components and pre-built components. From the official document on VueJs, v-model directive is expanded to modelValue and onUpdate:modelValue props during template compilation—we will have to provide these props ourselves:

export default { props: ['modelValue'], emits: ['update:modelValue'], render() { return h(SomeComponent, { modelValue: this.modelValue, 'onUpdate:modelValue': (value) => this.$emit('update:modelValue', value) }) } }
Soon, you will be confused about where to use the emits and props. In most cases, emits and props are defined in child components and render functions are used in parent components.
Render function applications in custom components:
Let’s define the child component first.
Child Component
`

{{ tag }}

const props = defineProps({ title: String }) We need a props from parent components to pass data to child components. So, title is the props in the child component. The we need to pass data to title in render function from parent component. render(){ return h( Childcustomcom, { ‘title’:[‘hello’,’this’,’is’,’array’], } ) } <script lang="ts"> import Childcustomcom from './childcustomcom.vue' export default{ name: 'customcom', components: { Childcustomcom } } `

Now we are done with props. Then we need to pass data from the child component to parent component. We need an emits.
child Component
`

{{ tag }}

const props = defineProps({ title: String }) const newTag = ref('') const emit = defineEmits(['addTag']) function handleinput(){ emit(‘addTag, newTag.value) } In side render function we need v-on to trigger the event. V-on in render function is on the capitalizedrender(){
return h(
Childcustomcom,
{
‘title’:[‘hello’,’this’,’is’,’array’],
‘onAddTag’ : (value) ={
console.log(value)
},
},
)
}`
Render function applications in pre-built components:
We use the example from the Naive UI components. https://www.naiveui.com/en-US/os-theme/components/dynamic-input
Ninput has dynamic props including v-model value (Value in controlled mode)
but we cannot the value props directly, it will cause error.
Inside render function:

`render(){
return h(
NInput,
{

'default-value': customvalue,
'on-change': (v:string)=>{
customvalue=v
},
type:"text",
})}
},

const customvalue = ref(‘’)

`Here we need on-change call back function to update the value from input to customvalue, the default-value props to give the initial value to ninput.

MarkMap Correction

Yuqing Ma — Mon, 23 Jan 2023 14:34:40 +0000

The code in the demo of markmap library from https://markmap.js.org/ does not follows the grammar of Typescript. We need to correct some errors for it.

Code in markmap-hooks.tsx:
` import React, { useState, useRef, useEffect } from 'react';
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

const transformer = new Transformer();
const initValue = `# markmap

beautiful
useful
easy
interactive `;

export default function MarkmapHooks() {
const [value, setValue] = useState(initValue);
// Ref for SVG element
const refSvg = useRef(null);
// Ref for markmap object
const refMm = useRef(null);

useEffect(() => {
// Create markmap and save to refMm
if (refMm.current) return;
refMm.current = Markmap.create(refSvg.current);
}, [refSvg.current]);

useEffect(() => {
// Update data for markmap once value is changed
const mm = refMm.current;
if (!mm) return;
const { root } = transformer.transform(value);
mm.setData(root);
mm.fit();
}, [refMm.current, value]);

const handleChange = (e:any) => {
setValue(e.target.value);
};

return (

);
}
I didn’t fix the error in markmap-class.tsx and used it as component so the code from index.tsx is different:import React, { useState } from 'react';
import { render } from 'react-dom';
import MarkmapHooks from './markmap-hooks';
import './style.css';

function TryApp() {
const [type, setType] = useState('hooks');

const Component = MarkmapHooks ;
return (

);
}

export default TryApp;
`

How to understand example from React Redux from TypeScript?

Yuqing Ma — Fri, 13 Jan 2023 22:14:37 +0000

How to understand example from React Redux from TypeScript?
Introduction:
Redux is essential for data processing in React development and TypeScript is getting popular. The document also recommends using TypeScript. For beginner of those concepts, the original document is a little bit challenging. Here, I make some extra notes for the Typescript example.
Sample from https://redux-toolkit.js.org/tutorials/typescript
Main:
A Store is a place where the entire state of your application lists. It manages the status of the application and has a dispatch(action) function. It is like a brain responsible for all moving parts in Redux. So you can think that store centrally holds the data in memory.

Component is fundamental for React, so many concepts can be explained from concept of components. This code comes from index.tsx. <Provider store={store}> <App /> </Provider> You can consider store is passed to root component as props. That is the reason that all the other child components can use store directly. Then we start looks at the store.ts in src/app folder. `import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'; import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
reducer: {
counter: counterReducer,
},
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType;
export type AppThunk = ThunkAction<
ReturnType,
RootState,
unknown,
Action

;_From Object Oriented Programming, we can consider store is an object from configureStore class. We will talk about counterSlice later. Then we look at the type of AppDispatch and RootState.typeof store.dispatch returns a type of store.dispatch and ReturnType<typeof store.getState> also return the type of getState. _ Here it is an example of ReturnType<typeof > with concept of genericsfunction sendData(a: number, b: number) {
return {
a: ${a},
b: ${b}
}
}
type Data = ReturnType
// The same as writing:
// type Data = {
// a: string,
// b: string
// }`
We should understand an idea Type Assertion in typescript.
Angle Brackets <> is called Type Assertion or casting.
Example:

`let code: any = 123;
let employeeCode = code;
console.log(typeof(employeeCode)); //Output: number

let employee = { };
employee.name = "John"; //Compiler Error: Property 'name' does not exist on type '{}'
employee.code = 123; //Compiler Error: Property 'code' does not exist on type '{}'

interface Employee {
name: string;
code: number;
}

let employee = { };
employee.name = "John"; // OK
employee.code = 123; // OKHere it is the explaination for ThunkAction We can consider it as utility types in Typescript.export type AppThunk = ThunkAction<
ReturnType,
RootState,
unknown,
Action

;`
Then here is the blog to explain ThunkAction
https://bloggie.io/@_ChristineOo/understanding-typings-of-redux-thunk-action

`import { AnyAction } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

export const thunkSendMessage =
(message: string): ThunkAction =>
async dispatch => {
const asyncResp = await exampleAPI()
dispatch(
sendMessage({
message,
user: asyncResp,
timestamp: new Date().getTime()
})
)
}

export type ThunkAction<
R, // Return type of the thunk function
S, // state type used by getState
E, // any "extra argument" injected into the thunk
A extends Action // known types of actions that can be dispatched

= (dispatch: ThunkDispatch, getState: () => S, extraArgument: E) => RRedux Thunk is the standard middleware for writing sync and async logic that interacts with the Redux store. A thunk function receives dispatch and getState as its parameters. Redux Thunk has a built in ThunkAction type which we can use to define types for those arguments:function exampleAPI() {
return Promise.resolve('Async Chat Bot')
}
Example of using ThunkAction directly
import { AnyAction } from 'redux'
import { sendMessage } from './store/chat/actions'
import { RootState } from './store'
import { ThunkAction } from 'redux-thunk'

function exampleAPI() {
return Promise.resolve('Async Chat Bot')
}
`
To reduce repetition, you might want to define a reusable AppThunk type once, in your store file, and then use that type whenever you write a thunk:
export type AppThunk = ThunkAction<
ReturnType,
RootState,
unknown,
AnyAction

In src/features/counter/counterSlice.ts file
Define the state of Counter and pass it to initialState.
`export interface CounterState {
value: number;
status: 'idle' | 'loading' | 'failed';
}

const initialState: CounterState = {
value: 0,
status: 'idle',
};Inside counterSlice object, name:’counter’ gives a name for your actions. If the name is ‘counter’ then the updateCounter action will have {type: ‘counter/updateCounter’} . If it is ‘abc’ then your action will have {type:’abc/updateCounter’}. The name should be distinguished from other reducers’ names. In the const selectCount = (state: RootState) => state.counter.value; the counter is not the name counter in counterSlice object. This selector function assumes that the reducer from the slice will be on the counter property of your root reducer. So in store.ts file this code :export const store = configureStore({
reducer: {
counter: counterReducer,
},
}); `
It defines the counter in selectCount. The location of the reducer relative to the root state is determined by the property key when you combine your reducers with configureStore or combineReducers.

In redux, the reducers are the pure functions that contain the logic and calculation that needed to be performed on the state.

We need to discuss what extraReducers is. The extraReducers field lets the slice handle actions defined elsewhere, including actions generated by createAsyncThunk or in other slices.
Builder in action reduer is a type-safe boundary around unsafe code.
addCase will run the reducer if the dispatched action's action.type field exactly matches the string that you provide
const reducer = createReducer(0, { "increment": (state) => state + 1, "set": (state, action: PayloadAction<number>) => action.payload }); It does the same result as follow: const reducer = createReducer(0, (builder => builder .addCase(incrementAction, (state) => state + 1) .addCase(setAction, (state, action) => action.payload) ));
incrementAsync is an object of createAsyncThunk class so it has type parameters:
A string that will be used to generate additional Redux action type constants, representing the lifecycle of an async request:
For example, a type argument of 'users/requestStatus' will generate these action types:
pending: 'users/requestStatus/pending'
fulfilled: 'users/requestStatus/fulfilled'
rejected: 'users/requestStatus/rejected'
createSlice will return an object that looks like:
{
name : string,
reducer : ReducerFunction,
actions : Record,
caseReducers: Record.
getInitialState: () => State
}
Each function defined in the reducers argument will have a corresponding action creator generated using createAction and included in the result's actions field using the same function name.
That is why we have export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export const incrementIfOdd =
(amount: number): AppThunk =>
(dispatch, getState) => {
const currentValue = selectCount(getState());
if (currentValue % 2 === 1) {
dispatch(incrementByAmount(amount));
}
};
The : is also used in typescript to define an objects type.
It is different from function types expression in Typescript

How to use Typescript Package in Javascript React?

Yuqing Ma — Sun, 08 Jan 2023 20:53:12 +0000

Introduction:
With the popularity of typescript, more newly developed npm package uses Typescript and the existed project mainly uses Javascript as the development language. It is important to add typescript for an existing React App project.
Setup:
Install typescript:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Created a file with js extension.
Warning: It will cause error if you directly use ts extension.

Here is a demo code from re_point/react-page-slides
`
import React from 'react';
import {ISlideConfig, PageSlides, SlideParallaxType} from '@re_point/react-page-slides';

export const MainPage = () => {

const slides: ISlideConfig[] = [

{

content:

first page content,

style: {

backgroundImage: 'url("public/photo/photo_1.jpg")'

}

},

{

content: second page content,

style: {

backgroundImage: 'url("public/photo/photo_2.jpg")'

}

},

{

content: third page content,

style: {

backgroundImage: 'url("public/photo/photo_2.jpg")'

}

},

];

return (

        enableAutoScroll={true}<br>
        transitionSpeed={1000}<br>
        slides={slides}<br>
        parallax={{<br>
            offset: 0.6,<br>
            type: SlideParallaxType.reveal<br>
        }}<br>
    /&gt;<br>
)<br>

};

`Change export const MainPage = () to const MainPage =()

add export default MainPage at the end

Supplementary Notes for Vue-Advanced-Cropper

Yuqing Ma — Fri, 16 Dec 2022 20:47:00 +0000

Introduction:
There are many images cropper packages on NPM platform. I have tried some of them for my projects and found out the most suitable and compatible image processing tool for Vue Cli 3. It offers the website (https://advanced-cropper.github.io/vue-advanced-cropper/ ) for demonstrations and documentations.
At the same time, there are some details to take care about. Also this article is beginer friendly for a simple setup.
Setup
Instead of using npm install -S vue-advanced-cropper. It requires following command for Vue 3.
npm install -S vue-advanced-cropper@next
Principal Concepts:

It is composed of three main parts: boundaries, visibleArea and coordinates.

Boundaries is the image area inside the cropper section. By default, it is equal to an image fitted to a cropper.

The visibleArea is the part of the image that a user see. It has same aspect ratio as boundaries.

Coordinates is the cropped coordinates of an image( left,top,width,height) inside the the visibleArea which is defined by coordinates.
*Minimal Working Example
*
It is necessary to implement and start with the minimal working example.
`
:src="img"
@change="change"
/>

import { Cropper } from 'vue-advanced-cropper'; import 'vue-advanced-cropper/dist/style.css'; export default { components: { Cropper, }, data() { return { img: '<a href="https://images.pexels.com/photos/4323307/pexels-photo-4323307.jpeg">https://images.pexels.com/photos/4323307/pexels-photo-4323307.jpeg</a>', }; }, methods: { change({ coordinates, canvas }) { console.log(coordinates, canvas); }, }, }; To achieve the result of static cropper, you only need to alternate the <cropper /> section in the minimal working example with the following code. :src="img"
:stencil-props="{
handlers: {},
movable: false,
scalable: false,
aspectRatio: 1,
}"
:resize-image="{
adjustStencil: false
}"
image-restriction="stencil"
/>For the fixed stencil size, change the <cropper/> with :src="img"
:stencil-props="{
handlers: {},
movable: false,
scalable: false,
}"
:stencil-size="{
width: 280,
height: 280
}"
image-restriction="stencil"
/>If you need to move and resize its stencil, classic hybrid method is recommended. :src="img"
:auto-zoom="true"
/>There are only two default stencil, RectangleStencil, which shows above, and CircleStencil. I created a simple circleStencil example based from the instruction.
src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
:stencil-component="$options.components.CircleStencil"
/>

import { CircleStencil, Cropper } from 'vue-advanced-cropper'; import 'vue-advanced-cropper/dist/style.css'; export default { components: { Cropper,CircleStencil }, data() { return { img: '<a href="https://images.pexels.com/photos/4323307/pexels-photo-4323307.jpeg">https://images.pexels.com/photos/4323307/pexels-photo-4323307.jpeg</a>', }; }, methods: { change({ coordinates, canvas }) { console.log(coordinates, canvas); }, }, }; Here is the example with circle edition of cropper with upload ability.

Load image

import { CircleStencil, Cropper } from 'vue-advanced-cropper'; import 'vue-advanced-cropper/dist/style.css'; // This function is used to detect the actual image type, function getMimeType(file, fallback = null) { const byteArray = (new Uint8Array(file)).subarray(0, 4); let header = ''; for (let i = 0; i < byteArray.length; i++) { header += byteArray[i].toString(16); } switch (header) { case "89504e47": return "image/png"; case "47494638": return "image/gif"; case "ffd8ffe0": case "ffd8ffe1": case "ffd8ffe2": case "ffd8ffe3": case "ffd8ffe8": return "image/jpeg"; default: return fallback; } } export default { components: { Cropper, CircleStencil }, data() { return { image: { src: null, type: null } }; }, methods: { crop() { const { canvas } = this.$refs.cropper.getResult(); canvas.toBlob((blob) => { // Do something with blob: upload to a server, download and etc. }, this.image.type); }, reset() { this.image = { src: null, type: null } }, loadImage(event) { // Reference to the DOM input element const { files } = event.target; // Ensure that you have a file before attempting to read it if (files && files[0]) { // 1. Revoke the object URL, to allow the garbage collector to destroy the uploaded before file if (this.image.src) { URL.revokeObjectURL(this.image.src) } // 2. Create the blob link to the file to optimize performance: const blob = URL.createObjectURL(files[0]); // 3. The steps below are designated to determine a file mime type to use it during the // getting of a cropped image from the canvas. You can replace it them by the following string, // but the type will be derived from the extension and it can lead to an incorrect result: // // this.image = { // src: blob; // type: files[0].type // } // Create a new FileReader to read this image binary data const reader = new FileReader(); // Define a callback function to run, when FileReader finishes its job reader.onload = (e) => { // Note: arrow function used here, so that "this.image" refers to the image of Vue component this.image = { // Set the image source (it will look like blob:<a href="http://example.com/2c5270a5-18b5-406e-a4fb-07427f5e7b94">http://example.com/2c5270a5-18b5-406e-a4fb-07427f5e7b94</a>) src: blob, // Determine the image type to preserve it during the extracting the image from canvas: type: getMimeType(e.target.result, files[0].type), }; }; // Start the reader job - read file as a data url (base64 format) reader.readAsArrayBuffer(files[0]); } }, }, destroyed() { // Revoke the object URL, to allow the garbage collector to destroy the uploaded before file if (this.image.src) { URL.revokeObjectURL(this.image.src) } } }; `
Remaind: toBlob is very important because that toBlob() will only do the first bullet synchronously, but will do the conversion to image format in a non blocking manner

Compare Composition API and Options API in VueJS CLI Life-cycle

Yuqing Ma — Tue, 06 Dec 2022 17:07:55 +0000

Introduction:
In Vue 3 composition api alone with Typescript is available and gaining popularity in web and application development industry. In this lecture, we will talk about the usage and adventages of options API and composition API in term of Life-cycle.

Why Life-Cycle?
Because JavaScript is a single-threaded, non-blocking, asynchronous, concurrent programming language, which allows you to open parts of web pages at the same time and single crush doesn’t cause the shut down of the entire website, and Vue Cli is mainly built with JavaScript. Therefore we need to define a procedure for data fetching and operational logic. Otherwise if the logical function run before the data is ready, it will cause error. If you choose to use options API, you always need to remember or try which part of your events are and where your data are coming from.

Here it is the grammar of the options API. Async is required when await even it defined inside.
Note that setup() is called before data() and components, so inside setup there is no access to data(), such as this.name in async mounted().

How to get and post data in setup()?
Suppose the data provided from other component, you need an inject package from ‘vue’ then therefore async setup can have access to the inject(‘id’). To post a data from setup, we need return it, for example trylist, audioList here. In async beforeUpdate(), we can directly use audioList.

Console.Log Problems
In JavaScript synchronous function, console.log can't execute until the method it called is done. In async function console.log executes independently and doesn’t wait till the response. It may cause error sometimes, so a better way to check data validation is to use it in or Html to show data on pages.
Composition API
Instead of thinking about the sequence of life-cycle in options API. In composition API with TypeScript, everything can be defined inside setup function. The syntax followed:

import { inject } from 'vue'
import { defineComponent } from 'vue'
import {useStore} from ‘vuex’
const store = useStore()
const onsubmitresult = () =>{
}

We can consider composition API is in options setup function without return. With TypeScript, which is object-oriented programming language, you can use it like Java or C++.

Therefore with the concept of object- oriented programming, we don’t need to check the life-cycle of API and step procedure, such as await then ... ,and we only need to think about how logic of function,data types, etc.

Fix vetur can't find package.json Error

Yuqing Ma — Tue, 06 Dec 2022 15:55:39 +0000

Working with vs code and vue project, we may encounter error from vs code “vetur can't find
package.json” .
The problem,sometimes, causes by vetur, because it looks for the package.json in root directory of
opening folder. We need to add a vetur.config.js file in the root folder of the project.
The content follows:
// vetur.config.js
/** @type {import('vls').VeturConfig} /
module.exports = {
// **optional* default: {}
// override vscode settings
// Notice: It only affects the settings used by Vetur.
settings: {
"vetur.useWorkspaceDependencies": true,
"vetur.experimental.templateInterpolationService": true
},
// optional default: [{ root: './' }]
// support monorepos
projects: [
'./packages/repo2', // shorthand for only root.
{
// required
// Where is your project?
// It is relative to vetur.config.js.
root: './packages/repo1',
// optional default: 'package.json'
// Where is package.json in the project?
// We use it to determine the version of vue.
// It is relative to root property.
package: './package.json',
// optional
// Where is TypeScript config file in the project?
// It is relative to root property.
tsconfig: './tsconfig.json',
// optional default: './.vscode/vetur/snippets'
// Where is vetur custom snippets folders?
snippetFolder: './.vscode/vetur/snippets',
// optional default: []
// Register globally Vue component glob.
// If you set it, you can get completion by that components.
// It is relative to root property.
// Notice: It won't actually do it. You need to use require.context or Vue.component
globalComponents: [
'./src/components/*/.vue'
]
}
]
}

Four Ways to Create Docker Image for Java SpringBoot Project

Yuqing Ma — Mon, 05 Dec 2022 16:14:35 +0000

In this lecture, we will discuss how to build up Docker Image for the SpringBoot project in 4 different ways.
(1) use spring-boot-maven-plugin built-in Build-Image (without Dockerfile)
(2) use Jib-Maven-Plugin (without Dockerfile)
(3) use dockerfle-maven-plugin (with Dockerfile)
(4) standard docerfile
Prepare:
Code:
https://github.com/davelms/medium-articles/tree/master/spring-maven-docker
make sure the following command can run spring boot Project
First, use spring-boot-maven-plugin built-in Build-Image
SpringBoot preinstalls the plugin for building the Docker image. We don’t need to do any modifications, we need to make sure that it is in the poxm.xml file (spring-boot-starter-parent)
All the setup is default setup and you don’t need to do any modification also.
Run the following command in the Spring Boot Root directory.
mvn spring-boot:build-image
Once you see Successfully built image, you can type:
_docker images
_For verifying if the image works with the name of the jar file
_docker run -p 9000:8080 -t name:version
_Then goes to localhost:9000 to test the run

Second, Jib-Maven-Plugin
You only need to run the following command
mvn compile com.google.cloud.tools:jib-maven-plugin:2.3.0:dockerBuild
~mvn compile
com.google.cloud.tools:jib-maven-plugin:2.3.0
use Jib plugin
once success you can see
Built image to Docker daemon as …

Third
We need a Dockerfile in the root directory.
FROM adoptopenjdk/openjdk11:alpine
RUN addgroup -S spring && adduser -S spring -G spring
USER spring:spring
VOLUME /tmp
ARG JAR_FILE
ADD ${JAR_FILE} /app/app.jar
EXPOSE 8080
ENTRYPOINT [“java”,”-Djava.security.egd=file:/dev/./urandom”,”-jar”,”/app/app.jar”]
In pom.xml file, you need to add tags and some configurations.

Run command MVN PACKAGE

Fourth,with docker build command for docker images
With installed java 11 and maven, the following command can run
mvn spring-boot:run
Spring Boot framework
The docker file as follow :
FROM adoptopenjdk/openjdk11:alpine-jre
FROM maven:3.6.3 AS maven
LABEL MAINTAINER=”anyname@gmail.com”
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN mvn package
CMD [“mvn”,”spring-boot:run”]
Build the container image
docker build -t nametheimage .
You can check the image in docker Images.
Done