Developer Blog

Tipps und Tricks für Entwickler und IT-Interessierte

ReactJS | Cookbook

General Readings

Create App

Run the following commands to create a new React Native project called “app-getting-started”:

npx create-react-app  app-getting-started
cd app-getting-started

Start App

npm start

Add Typescript Support

yarn create react-app app-getting-started-with-typescript --folder-name
cd app-getting-started-with-typescript
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Testing: Tools and Frameworks

ReactJS related

  • React Testing Utilities – Home
  • Jest – Delightful JavaScript Testing Framework with a focus on simplicity – Home
  • Jasmine – Home | Github
  • Enzyme – Home | Github

Others

ReactJS | Getting Started

Readings

Learning Path

  • Fundamentals Props and State
    • Create React App
    • JSX
    • Function Components
    • Class Components
    • useState and useEffect Hooks
    • setState and Component Lifecycle Methods
    • Conditional Rendering
    • Lists and Keys
    • Building Simple Forms
  • Advanced Topics
    • Hooks
      • useContext
      • useReducer
      • useRef
      • useMemo
      • useCallback
      • Custom Hooks
    • Context
    • Higher Order Components
    • Render Props
    • Refs
    • Error Boundaries
    • Portals
    • HTTP Requests
      • GET
      • POST
  • Ecosystem
    • State Management
      • Redux/ Mobx
      • Apollo Client
    • Routing
      • React Router
    • Styling
      • Styled Components/ Emotion
      • Tailwind CSS
      • Chakra UI / Material UI / Ant Design
    • Forms
      • Formik
      • React Hook Form
    • Testing
      • Jest + React Testing Library
      • Cypress
    • Misc
      • TypeScript
      • React i18Next
      • Storybook
      • Firebase
      • Practical React Libraries
    • Next Steps
      • Gatsby
      • Next.js
      • React Native

Topics

  • Create React App
  • Functional Components
  • Class Components
  • JSX
  • Props And State
  • useState and useEffect Hooks
  • setState and Component Lifecycle Methods
  • Conditional Rendering
  • Lists and Keys
  • Building Simple Forms

Get Started

Create App

Run the following commands to create a new React Native project called “app-getting-started”:

npx create-react-app  app-getting-started
cd app-getting-started

Start App

npm start

Keycloak | Cookbook

Thymeleaf

Add css file

Add css files from static folder into templates files

<link href="../static/lib/bootstrap/current/bootstrap.min.css" th:href="@{/lib/bootstrap/current/bootstrap.min.css}" rel="stylesheet" />

Keycloak | Troubleshooting

Configuration

Change Server Port

By default, executing standalone.sh (for Linux) / standalone.bat (for Windows) makes the server available at following urls:

https://localhost:8443/auth/
http://localhost:8080/auth/

If we need to run multiple instance of server at different ports, run the following command:

For Linux:

standalone.sh -Djboss.socket.binding.port-offset=100

For Windows:

standalone.bat -Djboss.socket.binding.port-offset=100

The above commands will add the offset of 100 to the defaults ports available for Keycloak server.

For example, previously the ports where 8443 and 8000. Now the new ports become 8443 + 100 = 8543 and 8080 + 100 = 8180.

References:

https://www.keycloak.org/docs/3.2/getting_started/topics/secure-jboss-app/before.html

Location of Server Logfile

\standalone\log

Errors

Client secret not provided in request

{"error":"unauthorized_client","error_description":"Client secret not provided in request"

Possible Solution

Change Access Type to public

Keycloak - Set Access Type to PUBLIC

Additional Readings

Keycloak | Getting Started

Introduction

Keycloak – Open Source Identity and Access Management for Modern Applications and Services

Installation

Java

Using AdoptOpenJDK8

brew info adoptopenjdk8

Eclipse

Keycloak

WildFly

See Also

Troubleshooting

Change Server Port

By default, executing standalone.sh (for Linux) / standalone.bat (for Windows) makes the server available at following urls:

https://localhost:8443/auth/
http://localhost:8080/auth/

If we need to run multiple instance of server at different ports, run the following command:

For Linux:

standalone.sh -Djboss.socket.binding.port-offset=100

For Windows:

standalone.bat -Djboss.socket.binding.port-offset=100

The above commands will add the offset of 100 to the defaults ports available for Keycloak server.

For example, previously the ports where 8443 and 8000. Now the new ports become 8443 + 100 = 8543 and 8080 + 100 = 8180.

References:

https://www.keycloak.org/docs/3.2/getting_started/topics/secure-jboss-app/before.html

Location of Server Logfile

\standalone\log

Additional Readings

Maven | Getting Started

Introduction

Installation

Install on macOS

$ brew install maven

Maven Commands

Maven Commands

Let’s look into some popular and must know maven commands. We will use a sample Maven project to showcase the command output.

1. mvn clean

This command cleans the maven project by deleting the target directory. The command output relevant messages are shown below.

$ mvn clean
...
[INFO] --- maven-clean-plugin:2.5:clean (default-clean) @ maven-example-jar ---
[INFO] Deleting /Users/pankaj/Desktop/maven-examples/maven-example-jar/target
...
2. mvn compiler:compile

This command compiles the java source classes of the maven project.

$ mvn compiler:compile
...
[INFO] --- maven-compiler-plugin:3.8.1:compile (default-cli) @ maven-example-jar ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 1 source file to /Users/pankaj/Desktop/maven-examples/maven-example-jar/target/classes
...

3. mvn compiler:testCompile

This command compiles the test classes of the maven project.

$ mvn compiler:testCompile
...
[INFO] --- maven-compiler-plugin:3.8.1:testCompile (default-cli) @ maven-example-jar ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 1 source file to /Users/pankaj/Desktop/maven-examples/maven-example-jar/target/test-classes
...

4. mvn package

This command builds the maven project and packages them into a JAR, WAR, etc.

$ mvn package
...
[INFO] --- maven-compiler-plugin:3.8.1:compile (default-compile) @ maven-example-jar ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 1 source file to /Users/pankaj/Desktop/maven-examples/maven-example-jar/target/classes
...
-------------------------------------------------------
 T E S T S
-------------------------------------------------------
Running com.journaldev.maven.classes.AppTest
Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.005 sec

Results :
Tests run: 1, Failures: 0, Errors: 0, Skipped: 0

[INFO] 
[INFO] --- maven-jar-plugin:2.4:jar (default-jar) @ maven-example-jar ---
[INFO] Building jar: .../maven-examples/maven-example-jar/target/maven-example-jar-0.0.1-SNAPSHOT.jar
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
...

The output shows the location of the JAR file just before the “BUILD SUCCESS” message. Notice the package goal executes compile, testCompile, and test goals before packaging the build.

5. mvn install

This command builds the maven project and installs the project files (JAR, WAR, pom.xml, etc) to the local repository.

$ mvn install
...
[INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ maven-example-jar ---
...
[INFO] --- maven-compiler-plugin:3.8.1:compile (default-compile) @ maven-example-jar ---
...

6. mvn deploy

This command is used to deploy the artifact to the remote repository. The remote repository should be configured properly in the project pom.xml file distributionManagement tag. The server entries in the maven settings.xml file is used to provide authentication details.

7. mvn validate

This command validates the maven project that everything is correct and all the necessary information is available.

8. mvn dependency:tree

This command generates the dependency tree of the maven project.

$ mvn dependency:tree
...
[INFO] --- maven-dependency-plugin:2.8:tree (default-cli) @ Mockito-Examples ---
[INFO] com.journaldev.mockito:Mockito-Examples:jar:1.0-SNAPSHOT
[INFO] +- org.junit.platform:junit-platform-runner:jar:1.2.0:test
[INFO] |  +- org.apiguardian:apiguardian-api:jar:1.0.0:test
[INFO] |  +- org.junit.platform:junit-platform-launcher:jar:1.2.0:test
...

9. mvn dependency:analyze

This command analyzes the maven project to identify the unused declared and used undeclared dependencies. It’s useful in reducing the build size by identifying the unused dependencies and then remove it from the pom.xml file.

$ mvn dependency:analyze
...
[INFO] --- maven-dependency-plugin:2.8:analyze (default-cli) @ Mockito-Examples ---
[WARNING] Used undeclared dependencies found:
[WARNING]    org.junit.jupiter:junit-jupiter-api:jar:5.2.0:test
[WARNING]    org.mockito:mockito-core:jar:2.19.0:test
[WARNING] Unused declared dependencies found:
[WARNING]    org.junit.platform:junit-platform-runner:jar:1.2.0:test
...

10. mvn archetype:generate

Maven archetypes is a maven project templating toolkit. We can use this command to generate a skeleton maven project of different types, such as JAR, web application, maven site, etc.

Recommended Reading: Creating a Java Project using Maven Archetypes

11. mvn site:site

This command generates a site for the project. You will notice a “site” directory in the target after executing this command. There will be multiple HTML files inside the site directory that provides information related to the project.

12. mvn test

This command is used to run the test cases of the project using the maven-surefire-plugin.

$ mvn test
...
[INFO] --- maven-surefire-plugin:2.22.0:test (default-test) @ Mockito-Examples ---
[INFO] 
[INFO] -------------------------------------------------------
[INFO]  T E S T S
[INFO] -------------------------------------------------------
[INFO] Running TestSuite
first-element
second-element
Employee setName Argument = Pankaj
...
[INFO] Results:
[INFO] 
[INFO] Tests run: 5, Failures: 0, Errors: 0, Skipped: 0
...

13. mvn compile

It’s used to compile the source Java classes of the project.

$ mvn compile
...
[INFO] --- maven-compiler-plugin:3.7.0:compile (default-compile) @ Mockito-Examples ---
[INFO] Changes detected - recompiling the module!
[WARNING] File encoding has not been set, using platform encoding UTF-8, i.e. build is platform dependent!
[INFO] Compiling 10 source files to /Users/pankaj/Desktop/maven-examples/Mockito-Examples/target/classes
...

14. mvn verify

This command build the project, runs all the test cases and run any checks on the results of the integration tests to ensure quality criteria are met.

Maven Options

Maven provides a lot of command-line options to alter the maven build process. Let’s look at some of the important maven options.

15. mvn -help

This command prints the maven usage and all the available options for us to use.

16. mvn -f maven-example-jar/pom.xml package

This command is used to build a project from a different location. We are providing the pom.xml file location to build the project. It’s useful when you have to run a maven build from a script.

17. mvn -o package

This command is used to run the maven build in the offline mode. It’s useful when we have all the required JARs download in the local repository and we don’t want Maven to look for any JARs in the remote repository.

18. mvn -q package

Runs the maven build in the quiet mode, only the test cases results and errors are displayed.

$ mvn -q package         

-------------------------------------------------------
 T E S T S
-------------------------------------------------------
Running com.journaldev.maven.classes.AppTest
Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.006 sec

Results :

Tests run: 1, Failures: 0, Errors: 0, Skipped: 0

19. mvn -X package

Prints the maven version and runs the build in the debug mode. It’s opposite of the quiet mode and you will see a lot of debug messages in the console.

mvn -X Debug Mode

20. mvn -v

Used to display the maven version information.

$ mvn -v
Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
Maven home: /Users/pankaj/Downloads/apache-maven-3.6.3
Java version: 13.0.1, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-13.0.1.jdk/Contents/Home
Default locale: en_IN, platform encoding: UTF-8
OS name: "mac os x", version: "10.15.1", arch: "x86_64", family: "mac"

21. mvn -V package

This command prints the maven version and then continue with the build. It’s equivalent to the commands mvn -v;mvn package.

22. mvn -DskipTests package

The skipTests system property is used to skip the unit test cases from the build cycle. We can also use -Dmaven.test.skip=true to skip the test cases execution.

23. mvn -T 4 package

This command tells maven to run parallel builds using the specified thread count. It’s useful in multiple module projects where modules can be built in parallel. It can reduce the build time of the project.

See also

Trobleshooting

Could not find or load main class org.apache.maven.wrapper.MavenWrapperMain

You’re missing the .mvn folder in your git repository. You should have a folder called .mvn which contains the following files

  • wrapper/maven-wrapper.jarwrapper/maven-wrapper.properties
  • jvm.config.

Try doing git add -f .mvn from the command line then commit and push.

Here is how to create .mvn directory with needed jar inside.

mvn -N io.takari:maven:wrapper

We can also specify the version of Maven:

mvn -N io.takari:maven:wrapper -Dmaven=3.5.2