Build React Native App (4) - Redux, Jest, and NativeBase

Image
From this blog, typescript feature will be added. There are couple of ways to implement static type checking like; flow from facebook, PropTypes and Typescript. Typescript is well integrated with Visual Studio Code and supports better linter, error messages, and intellisense. Reference site Github Sample Ex4 Currnet version D:\GitRepo\reactnative>npm --version 6.3.0 D:\GitRepo\reactnative>react-native --version react-native-cli: 2.0.1 react-native: n/a - not inside a React Native project directory D:\GitRepo\reactnative>yarn --version 1.9.4 Creating React Native App $ react-native init ex4 If you want to specify the version, add "--version 0.57.3" at the end. Add NativeBase to React Native $ npm install native-base --save ... + native-base@2.8.1 added 71 packages from 42 contributors, removed 50 packages, updated 829 packages and audited 34989 packages in 138.542s found 0 vulnerabilities $ $ yarn yarn install v1.9.4 warning package-lock.json found. You...
1 comment

Build SpringBoot and Angular Example(1) - Set up environment

title: Build Spring Boot and Angular Example(1) - Set up environment tags:

  • AngularJS 4
  • Angular
  • Angular CLI
  • Spring Boot
  • Bootstrap
  • Typescript date: Sep 9, 2017

Build SpringBoot and Angular Application(1) - Set up environment

Introduction

Lots of article explained how to build AngularJS or Spring Boot separately, but I couldn't find any good article how I can package these two components together and running from one package. The best way to do this is to separate back-end and front-end using REST api and packaging as one. Spring Boot has built-in components, so both front-end and back-end will be running from the Spring Boot Web components.

Reference

Development Environment

For the Spring Boot app(Back End), STS IDE will be used.

For the AngualarJS 2(Front End), following technologies will be used;

  • Typescript
  • Bootstrap 4
  • AngularJS 4
  • AngularJS CLI
  • NodeJS
  • Visual Studio Code

There is another way to develop UI using AngularJS material, but I am going to use Bootstrap as my UI library.

AngularJS Material

Architecture

sequenceDiagram User->>Front End: select menu from browser(localhost:8080 or 4200) Front End->>Angular Routing: Request for routing Angular Routing->>Angular Component: Request page handling Angular Component-->>Front End: Generate page Front End-->>User:Display new page User->>Angular Component:Click Contents Angular Component->>Angular Service:Process service Angular Service->>SpringBoot REST:Call REST API SpringBoot REST-->>Angular Service:Return JSON result Angular Service-->>Angular Component:Processing JSON Angular Component-->>Front End:Render Data Front End-->>User:Display data

To do this, we will need two routing URLs, one is for AnguarlJS and the other is for SpringBoot REST.

From this example, we will build CRUD operation for item and account.

The Routing Path for the angularJS will be

  • http://localhost:8080/item/create
  • http://localhost:8080/item/update
  • http://localhost:8080/item/delete
  • http://localhost:8080/item/retreive

The Routing path for the SpringBoot REST will be

  • http://localhost:8080/rest/item/create
  • http://localhost:8080/rest/item/update
  • http://localhost:8080/rest/item/delete
  • http://localhost:8080/rest/item/retreive

Set up AngularJS

First of all, NodeJS should be updated with latest version, so please go to NodeJS and install latest versoin

D:\test\angulartest>node -v
v8.4.0

D:\test\angulartest>npm -v
5.3.0

D:\test\angulartest>

After installing NodeJS, angular cli should be installed to use boilerplate and generate source code using ngcommand

  • ng new: The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

  • ng generate: Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.

  • ng serve: Easily test your app locally while developing.

  • Test, Lint, Format: Make your code really shine. Run your unittests or your end-to-end tests with the breeze of a command. Execute the official Angular linter and run clang format.

Installing Angular CLI

This components should be install to global repository.(option -g)

D:\test\angulartest>npm install -g @angular/cli
C:\Users\alex.joh\AppData\Roaming\npm\ng -> C:\Users\alex.joh\AppData\Roaming\npm\node_modules\@angu
lar\cli\bin\ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\@angular\cli\node_modul
es\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":
"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/cli@1.4.0
added 156 packages, removed 77 packages, updated 27 packages and moved 2 packages in 61.281s

D:\test\angulartest>
D:\test\angulartest>ng -v
Your global Angular CLI version (1.4.0) is greater than your local
version (1.3.2). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.2
node: 8.4.0
os: win32 x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

D:\test\angulartest>

Creating sample angularjs application

  • Create app from angularjs 2 boilerplate
  • Add Bootstrap 4
  • Running App using CLI
  • Test Bootstrap css
  • Check result
D:\test>ng new testapp
  create testapp/e2e/app.e2e-spec.ts (289 bytes)
  create testapp/e2e/app.po.ts (208 bytes)
  create testapp/e2e/tsconfig.e2e.json (235 bytes)
  create testapp/karma.conf.js (923 bytes)
  create testapp/package.json (1312 bytes)
  create testapp/protractor.conf.js (722 bytes)
  create testapp/README.md (1098 bytes)
  create testapp/tsconfig.json (363 bytes)
  create testapp/tslint.json (3040 bytes)
  create testapp/.angular-cli.json (1125 bytes)
  create testapp/.editorconfig (245 bytes)
  create testapp/.gitignore (516 bytes)
  create testapp/src/assets/.gitkeep (0 bytes)
  create testapp/src/environments/environment.prod.ts (51 bytes)
  create testapp/src/environments/environment.ts (387 bytes)
  create testapp/src/favicon.ico (5430 bytes)
  create testapp/src/index.html (294 bytes)
  create testapp/src/main.ts (370 bytes)
  create testapp/src/polyfills.ts (2480 bytes)
  create testapp/src/styles.css (80 bytes)
  create testapp/src/test.ts (1085 bytes)
  create testapp/src/tsconfig.app.json (211 bytes)
  create testapp/src/tsconfig.spec.json (304 bytes)
  create testapp/src/typings.d.ts (104 bytes)
  create testapp/src/app/app.module.ts (314 bytes)
  create testapp/src/app/app.component.html (1075 bytes)
  create testapp/src/app/app.component.spec.ts (986 bytes)
  create testapp/src/app/app.component.ts (207 bytes)
  create testapp/src/app/app.component.css (0 bytes)
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'testapp' successfully created.

D:\test>cd testapp

D:\test\testapp>npm install --save bootstrap@4.0.0-alpha.6 font-awesome
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":
"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ bootstrap@4.0.0-alpha.6
+ font-awesome@4.7.0
added 118 packages in 17.369s

D:\test\testapp>ng serve
Port 4200 is already in use. Use '--port' to specify a different port.

D:\test\testapp>ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:
4200/ **
Date: 2017-09-07T19:20:35.387Z
Hash: f0ada5e206130a902126
Time: 5707ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.64 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 209 kB {inline} [initial]
 [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]

chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.28 MB [initial] [rendered]

webpack: Compiled successfully.

After running application

TestApp

Adding bootstrap

From TestApp.angular-cli.json, add bootstrap.min.css under "styles"

"testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",

To test Bootstrap, "jumbotron" is added to the top of html.

filename: TestApp\src\app\app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div class="container">
    <div class="jumbotron">
        
          <h1 class="display-3">Bootstrap Test</h1>
    </div>
</div>
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>

Result after applying bootstrap

2.TestApp-Bootstrap

If you are running this from IE, there will be error like; File: polyfills.bundle.js, Line: 859, Column: 36

To fix this, go to polyfills.ts file and uncomment all lines related IE and run npm command as instructed. Need to install two more files.


/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

D:\test\testapp>npm install --save classlist.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"})

+ classlist.js@1.1.20150312
added 115 packages in 20.059s

D:\test\testapp>npm install --save web-animations-js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"})

+ web-animations-js@2.3.1
added 115 packages in 10.477s

NodeJS troubleshooting

npm - EPERM: operation not permitted on Windows

Stackoverflow

Run cmd as administrator Run npm config edit (You will get notepad editor) Change Prefix variable to C:\Users<User Name>\AppData\Roaming\npm

Summary

From this template, we accomplished how to set up AngularJS development and how to applying Bootstrap to angularjs.

Next tutorial will show how to create Spring Boot REST app and how to test with Postman

Comments

Post a Comment

Popular posts from this blog

Build React Native App (4) - Redux, Jest, and NativeBase

Image
From this blog, typescript feature will be added. There are couple of ways to implement static type checking like; flow from facebook, PropTypes and Typescript. Typescript is well integrated with Visual Studio Code and supports better linter, error messages, and intellisense. Reference site Github Sample Ex4 Currnet version D:\GitRepo\reactnative>npm --version 6.3.0 D:\GitRepo\reactnative>react-native --version react-native-cli: 2.0.1 react-native: n/a - not inside a React Native project directory D:\GitRepo\reactnative>yarn --version 1.9.4 Creating React Native App $ react-native init ex4 If you want to specify the version, add "--version 0.57.3" at the end. Add NativeBase to React Native $ npm install native-base --save ... + native-base@2.8.1 added 71 packages from 42 contributors, removed 50 packages, updated 829 packages and audited 34989 packages in 138.542s found 0 vulnerabilities $ $ yarn yarn install v1.9.4 warning package-lock.json found. You...
Read more

Replacing text in PDF file using iTextSharp

ReplacingTextUsingITextSharp title: Replacing text in PDF file using iTextSharp tags: - PDF - Replace Text - iTextSharp date: Nov 11, 2016 Overview I’ve trying to replace text in PDF file and this is most simple way to replace text in PDF files. Before approaching this, I’ve tried to replace text using command toolkit with pdftk, qpdf to decrypt, and sfk181 to replace string with new, but this approach faced couple of issues; 1. font, 2. text area size. After long investigation, this may be easy way to replace text. Put white colored rectangle on top of string and stamp text on the location like erase text using whitner and write on top of it. Tools Visual Studio 2013 C# iTextSharp Code using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using iTextSharp.text.pdf; using iTextSharp.text.pdf.parser; using iTextSharp.text; using System.IO; namespace EMTechnicalDieline { class Program ...
Read more

Using GIT(Bitbucket), Visual Studio Code

Concept of Git Git has two repositories; local and remote. Two different commands type to commit the changes; 1. commit/add: load/save changes to the local repository. 2. push/pull/clone: load/save changes from/to remote repository. How to setup remote git server , bitbucket , with Visual Studio Code To use git, I downloaded it from [git-scm](“ https://git-scm.com/downloads “) and installed with bash mode to keep the comparability for different platform. Set up remote repository * Create project from bitbucket. In this case, I created “blogmarkdown”. Remember the URL for the git repository. To find out the repository, just add “.git” at the end of the URL from bitbucket. For me, it will be “ https://alexjoh@bitbucket.org/alexjoh/blogmarkdown.git ” Link the remote with local folder * Create local folder. In my case, I created d:\gitrepo Initialize git local repo. Change the folder to the gitrepo and run git init If there are existing files from a remote git re...
Read more