...

I. Environment

1. Install Git

Link: Git - Windows 10

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/

...

Next, Install necessary tools for Vuejs and our project

...

II. ICE4 - FrontBuilder Project Setting For vscode

1. Source Code Download

Option1. Git clone by terminal

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 npm install

...

Run yarn install or yarn install --force

...

4. Change Domain Name

The default domain default 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

...

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: /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: /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

...