HomeBitalpha AI Official WebsiteMarketVideosCommunity
    Getting Started
    Why Webcodesk?
    System Requirements
    Install Webcodesk
    Beginner Tutorial
    Bootstrap project
    Install components
    Review components
    Create main page
    Create sign-in page
    Create sign-up page
    Create initialization flow
    Create main flow
    Create sign-in flow
    Integration with Firebase
    Create sign-up flow
    Build application
    Open source code in IDE
    Open in IntelliJ IDEA
    Source code structure
    How it works?
    Writing source code
    Create React component
    Develop component in isolation
    Create functions
last edited 2019-04-10

Create main page

First, we need to create the main page of the application. There is already an empty page with the main name in the Pages section on the left panel.

Webcodesk recognizes the main page as the index (start or home) page of the application.

Double click on the main item in the Pages section of the tree-view.

If you do not see the dashed area with "Drag and drop here" text inside the tab, click on Reload icon on the top toolbar.

The main page will play the role of a secured page that can be accessed only if the user is authenticated. That's why we will place here the UserProfile component that displays user profile details in JSON format.

But before that, we should put the PageLayout component on the page.

Drag and drop PageLayout item from the tree-view into "Drag and drop here" area.

Then drag and drop UserProfile item into cell placeholder on the page.

Click the Save button on the top toolbar in the current tab. We've successfully created our landing page.

However, it is not secured so far. If we click on the Live Preview button in the top left corner of the workspace, we will see the new tab with the main page (and user profile inside) just like it is opened in the browser.

Let's continue and create the sign-in page.

last edited 2019-04-10

Create main page

First, we need to create the main page of the application. There is already an empty page with the main name in the Pages section on the left panel.

Webcodesk recognizes the main page as the index (start or home) page of the application.

Double click on the main item in the Pages section of the tree-view.

If you do not see the dashed area with "Drag and drop here" text inside the tab, click on Reload icon on the top toolbar.

The main page will play the role of a secured page that can be accessed only if the user is authenticated. That's why we will place here the UserProfile component that displays user profile details in JSON format.

But before that, we should put the PageLayout component on the page.

Drag and drop PageLayout item from the tree-view into "Drag and drop here" area.

Then drag and drop UserProfile item into cell placeholder on the page.

Click the Save button on the top toolbar in the current tab. We've successfully created our landing page.

However, it is not secured so far. If we click on the Live Preview button in the top left corner of the workspace, we will see the new tab with the main page (and user profile inside) just like it is opened in the browser.

Let's continue and create the sign-in page.