I. Environment

1. Install Git

Link: https://ionsdp.atlassian.net/wiki/pages/createpage.action?spaceKey=ICE4P&title=Git%20-%20Windows%2010&linkCreation=true&fromPageId=1311735855

2. Install Nodejs

Download

Link: Node - MacOS

3. Install Yarn

Url: https://classic.yarnpkg.com/en/docs/install/#windows-stable => npm install --global yarn

4. Install vscode

Download and install - vscode

Url: https://code.visualstudio.com/

Open

Next, Install necessary tools for Vuejs and our project

Open

II. ICE4 - FrontBuilder Project Setting For vscode

1. Source Code Download

URL: http://dcsf-dev08.i-on.net/dxp/frontbuilder.git

a. Two option install

Option 1. Git clone by terminal

Next, Write Username & Password

Option 2. Git clone by vscode

2. Git Checkout

Click git branch on the left side and choose what you want to checkout git branch

3. Project Setting

Run yarn install or yarn install --force

4. Change Domain Name

The default domain name is localhost

a. Instruction to change domain name:

Step 1: Open notepad Run as administrator and open hosts file

Step 2: Enter the domain name: 127.0.0.1 local.i-on.net

Step 3: Save file

Step 4: Next, run yarn run loc

Url: http://local.i-on.net:3000/account/admin/SignIn

5. Apply ESLint

Click Settings

Enable ESlint

Enable Format on Save

Type default format and choose dbaeumer.vscode-eslint

III. Environment and Prerequisites of FrontBuilder Editor

1. Editor Types

Prerequisite condition: running BackendCore source first

Select icon run

If the message was displayed on the console window, the service has started normally.

a. Editor has 2 types:

• BO editor

Step 1: Run BO source code

Step 2: Enter yarn run loc on BO

Step 3: Run Backend Core

References for backend core: https://ionsdp.atlassian.net/wiki/spaces/ICE3/pages/983728145

Url: http://local.i-on.net:3000/account/admin/SignIn

• FO editor

Step 1: Run BO and FO source code

Step 2: Enter yarn run loc on BO

Step 3: Enter yarn run loc on FO

Step 4: Run Backend Core

References for backend core: https://ionsdp.atlassian.net/wiki/spaces/ICE3/pages/983728145

Url: http://local.i-on.net:3000/account/admin/SignIn

2. How to use the editor to drag and drop component

when all of the source code succeeded.

Open Url http://local.i-on.net:3000/account/admin/SignIn

a. Login Form

User information:

user: system

password: 1234

First of all, Click Platform Cosole

and then choose sites => pages

There are site map on the top bar

Next, choose any site, list page will be exposed by the site which you choice

Left FrontOffice Page: Contain all of the pages that we made

• New button: Make a new page

• List page

Right FrontOffice Page: Detail of the page

• Edit button: Edit the page which already been

• Save button: Save information when changing

• Delete button: Delete page

• Store button: Save page data

We have two ways to move to the template editor.

• Create your new page and click on the Edit button to move to template editor

• Select an available template on the left sidebar

Url: http://local.i-on.net:3000/admin/templateEditor?path=/grid-test&siteId=basic&_parentId=foPage::basic>/grid-test

IV. Update library on package.json

If you want to update package.json. Removing package-lock.json and then run npm install again