Forem: Ninan Kara

Day 5: CORS Setting for REST API in ReactJS

Ninan Kara — Tue, 20 Oct 2020 08:09:36 +0000

Intro

Please note that this solution is only applied for REST API that is developed using Spring framework, such as Spring Boot.

Dev Environment

React JS
Spring Boot
Axios
Heroku

Problem

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

I have problem when calling REST API, deployed in Heroku, from localhost of my ReactJS web application.

Solution

Simply add annotation in the controller backend. Please refer to reference below.

@CrossOrigin(origins = "http://localhost:3000/", maxAge = 3600)
@RestController

.....

Actually I took the wrong approaches when looking for solution. If you simply copy paste the error from browser, the result will bring you to another solution. Some said to add certain value in header of the request data, some said to create cors proxy, etc.

That is not wrong, but not applicable for my problem. Honestly I've tried everything I found, but nothing works. Then suddenly I got a light bulb. The other solution said that other than client side, if you developed your REST API, then it is more simpler to add the cors setting from backend side. Then I searched the solution for Spring Boot :)

Its another story if we consume the available api. Then it might be more complicated.

References

Tutorial

React #2: Custom CSS

Ninan Kara — Sun, 11 Oct 2020 07:36:30 +0000

Objectives

create custom bulma's css
create home banner with header

Steps

Honestly, the guideline in the official documentation is confusing me. Probably because I am not familiar with the package manager. So I tried it based on what I am understanding.

Create folder for the custom style file

create new folder under src folder, named styles or anything
create new folder under styles folder, named sass
create new file named index.scss
add following script in the file

@charset "utf-8";
@import "../../../node_modules/bulma/bulma.sass";

make sure to locate the bulma.sass correctly. since I created the index.scss under the src folder, then I defined it as script above.

Add scripts to package.json

add following script to existing package.json

"scripts": {
  "css-build": "node-sass --omit-source-map-url src/styles/sass/index.scss src/styles/css/index.css",
....
}

define the url to your own preferences. this is to create css file based on scss file that I created previously.

Build the css

in the terminal, run following script

npm run css-build -- --watch

This is to build the css file. After you run this script, there will be new css file created under the defined folder.
The --watch attribute is for real-time preview whenever we modified the scss file.

Import the css to the project

import the css into index.js delete the original import bulma from the file, because it will be overlapped.

Start the react project

open new terminal and run npm start

Modify the scss file

custom the bulma attribute

@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
$azalea: #FBC2C2;

// Update Bulma's global variables
$family-sans-serif: "Nunito",
sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $azalea;
$link: $purple;

// $widescreen-enabled: false;
// $fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
$footer-color: true;
$footer-padding: 1rem;

// Import only what you need from Bulma
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../../node_modules/bulma/sass/base/_all.sass";
@import "../../../node_modules/bulma/sass/elements/button.sass";
@import "../../../node_modules/bulma/sass/elements/container.sass";
@import "../../../node_modules/bulma/sass/elements/title.sass";
@import "../../../node_modules/bulma/sass/form/_all.sass";
@import "../../../node_modules/bulma/sass/components/navbar.sass";
@import "../../../node_modules/bulma/sass/layout/hero.sass";
@import "../../../node_modules/bulma/sass/layout/section.sass";
@import "../../../node_modules/bulma/sass/layout/footer.sass";

when you save the file, the new custom style will be applied directly.

Add Header and Footer File

create Header.jsx and Footer.jsx under the component folder.

import React from 'react';
// import 'bulma';

class Header extends React.Component{
    render(){
        return(
            <nav class="navbar is-primary is-fixed-top">
                <div class="navbar-menu">
                    <div class="navbar-end">
                        <div class="navbar-item">
                            <div class="buttons">
                                <a class="button is-light">
                                <span class="icon">
                                    <i class="fab fa-twitter"></i>
                                </span>
                                <span><strong>Tweet</strong></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        );
    }
}
export default Header;

import React from "react";

class Footer extends React.Component{
    render(){
        return(
            <footer class="footer is-primary">
                  <div class="content">
                      <p>Created by Me</p></div>  
            </footer>
        );
    }
}
export default Footer;

Modify the Banner.jsx file

add the Header and Footer component

<div>
        <Header/>
        <section class="hero is-white is-fullheight">

        <div class="hero-body is-primary">
          <div class="container has-text-centered">
            <h1 class="title">Hello, Bulma!</h1>
            <h2 class="subtitle">This is react app feat. Bulma</h2>
          </div>
        </div>

      </section>
      <Footer />
      </div>

Notes

import only required library is nice if you know what you want from the library, otherwise import the complete library would be more convenient. It happened to me a lot. I keep losing some class from Bulma, and keep adding it one by one which is troublesome.
Please note that to apply the customisation, put the import script after you declare all the customisation variables.

Link

Custom Bulma

React #1: Hello, Bulma

Ninan Kara — Sat, 10 Oct 2020 13:00:36 +0000

Objectives

Create hello world page with ReactJS and Bulma.

Prerequisites

Have npm package installed
Have IDE (for me Visual Code)

Steps

Generate react project with CRA (create-react-app) tool

npx create-react-app my-app

run npm start to check whether the boilerplate is installed correctly.

Install Bulma package

npm install bulma

instal node-saas

npm install node-sass

Delete/ clean CRA boilerplate

delete every file under /src/ file except index.js.

Import Bulma and FontAwesome library

First, open index.js, delete unused import header.
Second, open index.html under /public/ folder, add

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

Hello, Bulma!

create new folder named component under /src/ folder
create new file, Banner.jsx
add following script

import React from "react";
import "bulma";

class Banner extends React.Component {
  render() {
    return (
      <section class="hero is-primary is-fullheight">
        <div class="hero-body">
          <div class="container has-text-centered">
            <h1 class="title">Hello, Bulma!</h1>
            <h2 class="subtitle">This is react app feat. Bulma</h2>
          </div>
        </div>
      </section>
    );
  }
}

export default Banner;

render the banner by defining its component in index.js

import React from "react";
import ReactDOM from "react-dom";
import "bulma";
import Banner from "./component/Banner";

ReactDOM.render(<Banner />, document.getElementById("root"));

Link

Bulma
CRA Boilerplate
Project Github

Day 4: Push existing project to existing Git repo

Ninan Kara — Fri, 25 Sep 2020 07:34:31 +0000

Intro

Which one is first? Create new project in local? Create repository in local? or create repository in cloud first? Whatever the sequence, the process of connecting our project to git might be different. Honestly it is easier to generate repository in cloud first (Github, Gitlab, etc), then clone it to local. And modify the project afterward. But, sometimes I forgot. I create the project first, and also generate the repository in cloud.

So, how to connect existing project to existing repository?
Here it is.

Step-by-step

Note: I use VSCode and Gitlab

git init
git add .
git commit -m "initial commit"
git remote add origin your-git.git
git remote -v //to confirm
git branch --set-upstream-to=origin/master master
git pull --allow-unrelated-histories
git push

Voila.. its connected now :)

Conclusion

Previously, I always delete the local project, then clone the cloud repo to local. This is okay, but what if the project is already big? You may not want to redo it from scratch. Another way is to push directly and create new project in cloud, but I am too lazy to delete the old one and create the new one. Because I want to reserve the project name (so I need to delete the old one).

So, for now one, if I forgot to clone the repo first, I prefer this way to connect both. And wrote it here, since I keep forgetting stuffs :)

Day 3: Auto Generate TOC Github Markdown

Ninan Kara — Fri, 07 Aug 2020 06:59:49 +0000

Intro

After hiatus, I decided to continue my random note of my programming experience. Recently I am exploring markdown for filling wiki document in Github. I am used to write in Gitlab, and recently move to Github. I found something interesting when generating the table contents in the md document.

Tools Used

I am using:

VS Code
Github

Auto Generate TOC

Honestly I don't know anything about this auto feature. I just have habit to create TOC in every wiki document. I didn't find this feature in Gitlab. So I am curious whether this is Github feature, or VS Code feature.

Following is the step I did to generate the TOC.

Create Wiki page document for my Github project. Click the wiki tab in the project repository.
Clone the wiki repository to your local repository.
Create heading with # for h1, ## for h2, and so on.
Move to the beginning of the markdown document.
Type Table of Contents with h1 format. Enter.
Type - to start the list. And type the first section with internal link, - [Example](#example)
Click Enter.
Save your document.

Voila!! Your TOC will be generated automatically based on heading level you've created.

See the up to date part? If you update the structure, it will be updated automatically too once you save the document.
I don't know about others, but I really like this auto feature :D

Creating Github Pages with Jekyll

Ninan Kara — Wed, 29 Jul 2020 05:47:31 +0000

Intro

The reason I wrote this is because the official documentation didn't work smoothly. Just in case I forgot the step, I decided to write it here for my own documentation.

Step-by-step

Create public repository in Github with following name username.github.io
Clone it to your local repository
Install RubyInstaller , and follow the step till complete
(Optinal) If the installer doesn't automatically run, run following command ridk install
If you are not sure, install no 1 and 3
Install Jekyll by run following command gem install jekyll bundler
Check whether Jekyll is completely installed by run jekyll -v

Jekyll installation complete, now setting the Github pages

Open your local repository
Go up one folder by run cd ..
Run jekyll new username.github.io --force to install jekyll in Github pages
Open Gemfile file
Remove or comment following line gem "jekyll", "~> 4.1.1"
Add following line gem "github-pages", group: :jekyll_plugins
Update the version of other plugins, by referring Github Dependency Documentation . As for me, I updated the version of jekyll-feed version. Save your work.
Go to command prompt and run bundle update following update to command

Configuration done!

Now commit your local repository and push it to Github.
Run your pages.

Flutter #1 : Bottom Navigation Bar Template

Ninan Kara — Fri, 26 Jun 2020 02:09:12 +0000

Background

Recently I am learning about creating front end design with Flutter. The language used is Dart. Anyway I created this post because I realized that I always use this structure whenever I make a new app. The design is simple. One page with tab navigation bar.

Since I do not touch Flutter everyday, I keep forgetting how to make this kind of UI. I made this base template, so that I can only care about adding the service and other logics to the app.

Github

Source code

Preview

Day 2: Java Validation

Ninan Kara — Tue, 15 Oct 2019 02:32:46 +0000

Intro

Recently, I focus on building a REST API using Spring Boot, Java and Swagger.
We all know that REST API involves Request and Response parameter in it. I was amazed at how Java provides validation to prevent repeatable line of code.
Before annotation era, we always do the validation using if else instruction. If this field is null then throw exception, if A is null then B becomes mandatory, and so on. Imagine you create hundreds API involves hundreds field parameters?

Validation annotation

So, Java gives you a solution. You can put validation annotation attached with field. If you create custom validation, you can put it also in class level. I will note down the basic one. Following are the common annotation used for field validation on Request parameters.

@ NotBlank -> validates that value is not null. can be used in any type of field. usually String type
@ Size -> validates size/length of value. Usually applied for integer type. It has attribute min and max
@ Pattern -> to validate pattern using regex. I used this one a lot. It is very convenience to use other than comparing String with equals method. The challenge is creating the regex itself. You can simulate it here before use it. Probably I will write about this part in separate post.

Custom Validation

If your requirement getting complicated, and no basic annotation can accommodate it, you may create your own validation. This post is a good start .
I will share one of my custom validation later :D

Some example

@Pattern(regexp="^[0-9]*$")
@NotBlank
@Size(max = 20)
String myNumber;

@MyCustomValidation
String myCode;

Day 1: Javadoc

Ninan Kara — Fri, 04 Oct 2019 01:53:28 +0000

Intro

I have heard about Javadoc since the first time I touched Java like 5 years ago. But I realized that I still didn't understand what Javadoc is until I wrote this note. At first I thought that Javadoc is a Java documentation that can be printed or exported as PDF. Yeah, a documentation about the program. Automatically generated. Well, I was not 100% wrong. But something that I missed was, how to create or leave a good Javadoc.

Usually a developer will leave comment and explain briefly about a line of code. Like in Java, we use "//" or "/** */" character to leave a comment. Well, that is not a Javadoc I found recently. It is beyond that. haha sorry for my inexperience :)

Javadoc

When we call method from other class, there will be a small pop up windows appears explaining what the method is about. That small pop up windows what they call JAVADOC~

I really didn't understand until I found my own brief explanation about the method came out. And realized that is the right way to generate/ write comment to become a Javadoc.

How to write a good Javadoc

Writing documentation is important. Explain about the method/class or anything very briefly. So that, the next programmer who will read your code will understand what you are trying to write.

Above the method, start with /** to open a block comment section. This comment section can apply html and markdown tag. So make it pretty ;)

Always include @param, @return, @throws in the Javadocs. It's important when calling this method, and have no idea how to use the method.

I learned that a @param has to be followed by explanation about the param itself. for example :
@param firstNumb the first number
@param secndNumb the second number

something like that. complete it with noun. for the detail of how to write a good Javadoc, please refer to reference below~

References

Oracle

Intro

Ninan Kara — Fri, 04 Oct 2019 01:50:45 +0000

100 days of Programming's Notes

I want to challenge myself to leave small notes every times I've learned about something in this post. It will be a small things, but at least I thought it was important notes to remember.

It could be anything. Probably java, javascript, java, or devOps, etc. :)