Scrivito Example App JS

This is a showcase app, how Scrivito is working as a JavaScript application.

Prerequisites

• node >= 8.0.0
• npm >= 5.0.0 (already part of nodejs 8.x).

Now simply call npm install in the commandline to install all js dependencies (which are places in the folder node_modules/).

Specify the Scrivito CMS to use

The ScrivitoJS example app requires the tenant ID of your CMS. The ID is read from the environment variable SCRIVITO_TENANT. The environment variable can also be set via .env.

To specify it, proceed as follows:

• Go to your Scrivito account.
• If you don’t have a CMS, create one.
• Navigate to your CMS instances.
• Click the CMS to use.
• Open the “Settings” tab.
• Scroll down to the “API Keys” section.
• Copy the value after SCRIVITO_TENANT= to the clipboard.
• In the project directory, open/create the file .env and paste the ID after the SCRIVITO_TENANT key. The file should then look like this:

SCRIVITO_TENANT=0123456789ABCDEF0123456789ABCDEF

See .env.example for an concrete example.

Set 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 “Settings” tab of the CMS to use with your app.
• Scroll down to the “Development” section.
• Click “Edit” to change the additional CORS origins and add the local URL under which your app will be accessed: http://localhost:8080.

See Getting Started with ScrivitoJS for more information.

How to build/compile

Calling npm run build will compile all js, html and css and place it in the build/ folder.

How to develop

Calling npm start will start a webserver, which listens to localhost:8080 and opens that site in your browser. It should also automatically reload the page, once changes to the code (in src/) have been made.

How to develop design

Calling npm run serve:design will start a webserver, which listens to localhost:4000. It will serve all files from the folder design/ and the file src/assets/stylesheets/index.scss as http://localhost:4000/index.css.

How to reset/import content

• Visit http://localhost:8080/scrivito
• Create a working copy and choose the "edit" mode
• Open the browser console
• Delete all previous content: scrivito_application.ExampleApp.DangerZone.reset(). Please be aware, that this will delete all contents from your tenant!
• Import all contents: scrivito_application.ExampleApp.DangerZone.importContent(). This can take several minutes, depending on your upload speed. Wait until no saving indicator is shown at the right top corner.
• Once the saving indicator says "Changes saved" or is no longer visible, reload the browser window.
• If you are happy with the new content, publish the working copy.