Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action

Getting Started with the Scrivito Example App

Getting Started with the Scrivito Example App

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!

Six steps to install the Scrivito Example App locally

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:

git clone https://github.com/Scrivito/scrivito_example_app_js.git

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:

cd scrivito_example_app_js brew install node

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

npm install

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 webserver

For development purposes, you can launch a local webserver. From within the Scrivito Example App directory, run:

npm start

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.

Done! What's next?

Congratulations! You should now be able to use the Scrivito Example Application! To activate the Scrivito editing interface, add “scrivito” to the URL: http://localhost:8080/scrivito.

For being able to log in to a Scrivito-based website as an editor, your browser must accept third-party cookies for scrivito.com. With Safari, cross-site tracking must not be prevented. Most browsers let you configure cookie handling and tracking options via their advanced or privacy settings page. Note that ad blockers may also interfere with the login procedure.

Using Scrivito’s in-place editing

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!