Getting Started with Scrivito

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:

Copy
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 the dependencies

You need to have node (>= 8.0.0) and npm (>= 5.0.0) installed. You can download an installer from https://nodejs.org/en/download/current/, or install them manually if you are using Homebrew. Since nodejs 8.x includes npm 5.x, the following should suffice:

Copy
cd scrivito_example_app_js
brew install nodejs

Now have npm install all its dependencies:

Copy
npm install

4

Specify the Scrivito CMS to use

The Scrivito Example app requires the ID of your CMS. To 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 value after SCRIVITO_TENANT= to the clipboard.
  • In the project directory, open the file “.env.example” and paste the ID after SCRIVITO_TENANT=. Then rename the file to “.env”. The contents should look like this:
.env
Copy
SCRIVITO_TENANT=0123456789ABCDEF0123456789ABCDEF

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.

  • Like above, 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:

Copy
npm start

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

Note that application errors (e.g. faulty React components) 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.

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!