Starting and Running an Interface Builder Project

Starting and Running an Interface Builder Project

With the Interface Builder, the easiest way to start developing a web application is to clone the Example App or the Portal App and tailor it to your needs. However, there’s more to web development than cloning a repository.

We’ll touch some aspects central to developing web applications with the Interface Builder here – from preparation to deployment – and, where appropriate, point you to in-depth articles in our documentation for further reading.

Preparation

Are JavaScript and React included in your web development repertoire?

The Interface Builder itself and the web apps built with it are fully based on JavaScript and React. Websites created with the Interface Builder are single-page apps, meaning that they run safely and fast in the visitor’s browser.

React is closely linked to JSX, a syntax extension that makes writing React-based apps easier by letting you use markup in your JS code. See Rendering Interface Builder Page and Widget Markup with JSX to learn more.

Did you take the time to assess the Example App or the Portal as a starting point?

Both apps are the perfect base for getting started because:

Or would you rather like to start off from a standard app (create-react-app)? See Adding the Interface Builder to Create-React-App for integrating an existing React app with the Interface Builder.

Implementation

Have you got your first wireframes and mockups ready for implementation?

If you have the basic layout of a page and want to implement it in a React environment, the main task usually is to modularize the layout and provide components for its parts. The header and footer, the main navigation, maybe a sidebar, and, of course the editable content area – all these should be isolated and turned into dedicated components.

The diversity of web pages is taken account of by taylored page types and the components used to render them. For example, the homepage and standard pages usually include a main navigation, while landing pages don’t.

This applies analogously to any editable area to which content of different types can be added: columns, text, images, boxes, etc. With the Interface Builder, those types are represented as widgets.

You can create page and widget types (commonly called object and widget classes) through the Interface Builder SDK. Ultimately, such types are React classes, fine-tuned to the special tasks they have in the user interface. The same applies to the React components for rendering pages and widgets. They, too, need to be connected to the SDK to let them access content.

Is your website going to include forms or communicate with third-party services?

Web applications based on the Interface Builder are single-page apps running in the visitor’s browser. There’s several advantages to this (first and foremost: speed), but, when using services that require authentication, no remote server is there to hide sensitive data such as login credentials from curious users.

Such use cases can be solved with serverless computing (or serverless infrastructure) services such as AWS Lambda. They free you from having to set up and maintain your own infrastructure merely for accepting or processing form content, or using APIs requiring authentication.

SEO, social media integration

While on-site SEO can be accomplished primarily by following a set of recommendations dealing with site and URL structure, content consistency, site speed, indexing, and so forth, connecting your content to social media comes down to enriching pages with the required pieces of information and rendering social cards from them.

Going live

Deploying an Interface-Builder-based app without any preparatory effort is as simple as uploading the built app to the “Deployment” section in your Dashboard. This makes your app available on your scrivito.net subdomain.

JustRelate partners with Netlify. After claiming your Netlify website via your Dashboard, there’s a considerable number of deployment and automation options to choose from. To name just a few:

  • Drag/drop your project directory on the “Deploys” section of your site to have it built and published.
  • Set up continuous deployment from a branch of your Git repository (e.g. at GitHub) for staging or production.
  • Perform A/B tests from two branches.
  • Use outgoing webhooks to trigger an action or report a status on specific events during deployment.

In-place editing

Just in case you have been asking yourself why there’s no section about “Setting up content editing”: The content any Interface-Builder-based app delivers can be edited directly on the website via edit.scrivito.com. Just sit back and relax. :)

Allowing outbound traffic

If content editing takes place in an environment that restricts outbound traffic (e.g. by means of a firewall), make sure to whitelist the domains on which your hosted Interface-Builder-based app are made available (for editing or staging purposes), plus these:

my.scrivito.com

For authenticating editors or visitors.

docs.scrivito.com

Provides the documentation the user interface links to.

cdn1.scrvt.com, cdn2.scrvt.com, cdn3.scrvt.com

CDN URL for binary content such as images, videos, PDF files, etc.

assets.scrivito.com

Assets (images, stylesheets) used by the Interface Builder’s user interface.

api.scrivito.com

The endpoint for communicating with the Interface Builder’s backend.