If you would like to try out Scrivito or create your own Scrivito-based website, there is a feature-rich Example Application you can install locally. Just get an impression of how smart Scrivito is, or use the example app as the basis of a new website!

Installing the Example App requires some basic web development knowledge, but you don’t need to be a JavaScript expert to utilize this app!

1Register with us

If you haven’t already done so, please register with JustRelate at my.scrivito.com and create a trial instance for storing and retrieving website content.

2Clone the Example App

Clone or download the Example App from https://github.com/Scrivito/scrivito_example_app_js. To clone it, open a terminal, change the directory to where your projects are, then:

This creates a subdirectory named after the repository, “scrivito_example_app_js”.

3Install the required tools and modules

You need to have node (>= 12.0.0) and npm (>= 7.0.0) installed on your machine. You can download an installer from https://nodejs.org/en/download/, or install them manually if you are using Homebrew. Since node includes npm, the following should suffice:

Now have npm install all the modules the app depends on:

4Specify the Scrivito instance to use

The Example App requires the ID of your Scrivito instance. To determine and specify it, proceed as follows:

• Log in to your JustRelate Console.
• Select the account and thereby the Scrivito instance you created in step 1.
• Copy the default instance ID stated at the bottom right of the “Overview” tab to the clipboard.
• In your local project directory, open the file “.env.example” and paste the ID after SCRIVITO_TENANT=. Then save the file as “.env”. Its contents should look like this:

5Set the CORS origin(s)

To enable resource sharing between your Scrivito instance and your web application, specify the URL(s) of your app on the “Trusted origins” tab in your Console. Click “Add origin” to specify another CORS origin or local URL under which your app will be accessed, e.g. http://localhost:8080.

6Launch the web server

For development purposes, you can launch a local web server. From within your Example App directory, run:

This opens http://localhost:8080 in your standard browser. Changes made to the “src” subdirectory immediately cause the app to be reloaded and the current page to be redisplayed.

Application errors (caused by, for example, malfunctioning React components) will show up in the browser console, not in the terminal. In the latter, only compilation errors, issues with library dependencies, etc. are indicated.

Congratulations! You should now be able to use the Example Application! To create or change content using the editing interface, open edit.scrivito.com in your browser and specify your local app URL, i.e. http://localhost:8080.

All website content can be created and edited using working copies. Using the sidebar to the right, you can create or publish working copies, or open the changes list to see what has been edited so far. Read more about working copies and the published content.

Scrivito’s editing interface is truly easy to use: move the mouse pointer across a page to see the widget frames. Click one of their plus icons to add a widget, or use the handle at the top right to open their menu or drag them elsewhere on the page. See the Editor’s Guide for details.

Have fun!