Skip to main content

Build a Website

The Enterstarts platforms offers special support for developers, admins, users that wish to build the simple, sofisticated, SEO-enabled fast websites, portals and platforms we've grown used to.

At the end of this tutorial, we will build this nice looking listing of our favorite pets. Instalation went well

Overview

Enterstarts Website Systems allows building powerful web applications (website, portals, customer facing systems) to process, display and collect information from static sources, dynamic api's, ecommerce venues with special support for SSR (Server Side Rendering) and client side rendering.

Funcionalities

  • Build complex, and intensive blade components
  • Manage any-scale website by assembling components into pages
  • Scale your application with caching and at the edge
  • Render ReactJS inside php
  • Stream html, ajax and requests with laravel livewire
  • Customize 100% your application layout

Audience

The target audience of this tutorial is for frontend and backend developers. The Website System also offers low-code amenities for adequate circustances. This tutorial is to highlight to core developers the full spectre of possibilities.

Architecture

Everything starts by creating an application launching the builder and adding or removing components to a page.

All Websites Applications consists simply of:

  • Components & Layouts
  • Pages
  • Applications

Example (Pet Store)

To quickstart, lets create an example application named PetStore. where we'll list images of pets. Inside the backoffice, open the menu and head to Developer Cloud - Launch Application.

App Menu

Then launch the application by filling the name, version and environment. For the template please choose etx-website

Launch Application

After creating the application, please choose open console, to open the website details page.

Launch Application Console

Afterwards you're greet with details of the website, its pages, template details, etc. Application Console Screen

Deploy Application Template

Start by deploying the application structure on the website-engine, this generates the application configuration, deploys laravel app structure and prepares all the folders necessary to host the pages and the components

Deploy Template

After this is done, we're ready to deploy pages, and components. Move a little bit higher and create a page (index).

Create Page

Open the builder on the index page

Page List

This will open the builder

Builder Console

Component Template Modules

The page is empty and contains no content, lets start by creating and adding a component that lists pets. In order to create a component, you need a component module first, if you have no modules yet in your organization or wish to create a separate module, please head to Developer Cloud - System Modules to create this module. Dont forget to specify the module type as Component Module. Then head to Developer Cloud - Component System to open the module to create the component.

In this case, we're creating the module pet_store: Create Module

Dont forget to check the 'Show on search?', it will allow the module to be found on the builder modules. Afterwards head to Developer Cloud - Component System and open the pet_store or another module. Module names should be valid identifiers.

Show Petstore module

Create Component Template

Then just create the petstore listing component template. It is called a component template because it is just that, a template for the component. In this case, we want to create a component for the website, so it will be a BLADE component template.

Click the 'New Template' button and type the name 'petstore_listing'.

caution

Component template names should be valid identifiers and in the case of blade templates should be in lowercase and separated by underscore. ex: wb_my_component, wb_new_layout, petstore_my_comp rather than wbMyComponent or wbNewLayout

Show Petstore module

After creating the template, you can see the details and the component main file (component.blade.php) Show Petstore Listing Component Details

Click the builder button, which will take you to the component builder console. As you can see bellow, the website-system already generates a boiler plate component code.

Component Template Image Component Template Image

The component editor is very simple. you can create as many files as needed, and after editing the code of your component, click the 'Deploy Component' button on the preview.

info

Always click 'Deploy Component' after making changes to your component, after that click the 'Reload' button to refresh the preview-code. If any error occurs during render, debug your component, edit, Deploy again and hit refresh.

Add Component Template To PetStore Application

Lets add this template to our application just to see how it looks on the builder and on the final website.

Head again to the builder and refresh the list of modules on the left column of the builder. The new petstore module should be visible with the sole component.

Component Builder List Module

Click on the petstore_listing component and it will be add to the page. The builder should look like the above, according to the component code.

Component Builder List Module

Now, click the Save and Preview buttons to see how the raw page looks Component Builder List Module

info

Always click 'Save Page' after adding, removing or updating the page components.

And voilla heres the page. You can Click here to view it yourself.

Raw Page

Update the component

Now lets update the component with listing of the pets. Back to component editor, open the component.blade.php file and add the following contents:

component.blade.php
<div class="row rs-margin">
<div class="col-lg-4 col-sm-12 col-xs-12 col-md-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://images.pexels.com/photos/3361739/pexels-photo-3361739.jpeg?auto=compress&cs=tinysrgb&w=750&h=750&dpr=1" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Doggie</h4>
<p class="card-text">My best Friend</p>
<a href="#" class="btn btn-primary">Addopt</a>
</div>
</div>
</div>

<div class="col-lg-4 col-sm-12 col-xs-12 col-md-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&w=750&h=750&dpr=1" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Ferrel</h4>
<p class="card-text">Not so friendly, but a good company</p>
<a href="#" class="btn btn-primary">Addopt</a>
</div>
</div>
</div>

<div class="col-lg-4 col-sm-12 col-xs-12 col-md-4">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://images.pexels.com/photos/5256708/pexels-photo-5256708.jpeg?auto=compress&cs=tinysrgb&w=750" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">D. Swag</h4>
<p class="card-text">This doggo is not easy on swag, he got it all</p>
<a href="#" class="btn btn-primary">Addopt</a>
</div>
</div>
</div>

<div class="col-12">
<p>
<a href="Photo by Cong H from Pexels: https://www.pexels.com/photo/calico-cat-on-focus-photo-1404819/">
Photo by Cong H from Pexels
</a>
</p>
</div>

</div>

Click the 'Save' button or Ctrl+S to save the contents, after click Ctrl+q to go to preview mode and then hit a Deploy Component action. Then refresh the component. This should appear:

Raw Page

Update Site

Now lets update the PetStore website to receive the changes made to the component.

info

After adding a component to a page, you have to explicitly install it on the application everytime there's a change in the component.

Click on the top menu 'Actions' > 'Install on Application' then search for Pet Store and just install.

Top Install Component on App Instalation went well

Now back at the builder, perform a refresh on top left button and you should get the new component updated.

Instalation went well

Now perform Save and Preview again, the Petstore website should look like this:

Website Updated

The End

That's it for now. But this is just the beginning, next tutorials will feature fragment components, reusing other components, SSR, Http Request inside components, embeeding react and much more, stay tuned.

Enterstarts.com