If you would like to try out Scrivito or create your own Scrivito-based website, there is a feature-rich Scrivito 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!

What is Scrivito?

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

1Register with us

Have you already registered with us at my.scrivito.com? If not, please do so to get a trial or paid CMS for storing and retrieving content.

2Clone the Scrivito 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 CMS to use

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

• Go to your Scrivito account.
• If you don’t have a CMS, create one.
• Click the CMS instance you wish to use.
• Open the “Settings” tab.
• Copy the ID after SCRIVITO_TENANT= to the clipboard.
• In the 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 CMS and your web application, specify the URL of your app in the CMS settings.

• Navigate to the “Deployments” tab of the CMS to use with your app.
• Click “Edit” in the “Other authorized URLs” section.
• Add additional CORS origins and local URLs under which your app will be accessed. for example: http://localhost:8080.

6Launch the web server

For development purposes, you can launch a local web server. From within the Scrivito 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 Scrivito 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.

With Scrivito, all editing is done 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!