Scrivito Example App JS

Scrivito is the world's most secure, serverless JavaScript CMS. Based on ReactJS, it is completely maintenance-free, cost-effective, and has unprecedented security. Learn more about Scrivito at scrivito.com.

This example app shows Scrivito’s features and is a great basis for your own Scrivito website projects.

Features

Scrivito is a SaaS Content Management Service, built for digital agencies and medium to large sized businesses.

It is the only CMS that combines unmatched WYSIWYG usability for editors with maximum flexibility for developers – because it is at the forefront of the current JavaScript web development revolution.

And because Scrivito is 100% serverless, you'll never have to patch your CMS, so it's the most secure and cost-effective solution on the market.

Getting Started

Sign up for a free trial at my.scrivito.com/signup.

Once you have a Scrivito tenant, it's time to do some development.

Clone repository

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

cd scrivito_example_app_js/

Install/check prerequisites

Make sure that you have installed.

node -v
# should output something like v18.17.0

Install dependencies

Now simply call npm install in the command line to install all JS dependencies (which are placed in the folder node_modules/).

Specify the Scrivito CMS to use

The Scrivito example app JS requires the tenant ID of your CMS. The ID is taken 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 Websites.
• Click the CMS to use.
• Open the “Settings” tab.
• Scroll down to the “Anonymous access for the Scrivito Javascript SDK” 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 example.

Set other authorized URLs

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 “Deployment” tab of the CMS to use with your app.
• Make sure that http://localhost:8080 is added to the "Other authorized URLs".

See Getting Started with ScrivitoJS for more information.

How to develop

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

Your first change

To see development in action, let's change the ButtonWidget so that it prefixes all buttons with your favorite emoji.

Open up the react component responsible for rendering a ButtonWidget. It's located at src/Widgets/ButtonWidget/ButtonWidgetComponent.js. Now look for the Scrivito.LinkTag and insert

{"🚀 "}

before

{text}<i className="fa fa-angle-right fa-4" aria-hidden="true" />

After saving the file, your browser should automatically reload http://localhost:8080 with your new emoji button. Of course you can choose another emoji, check out emojipedia.org.

How to generate page and widget classes

For having the scaffolds of new CMS object and widget classes conveniently created, a Yeoman-based generator is included. It adds the folder and files needed as a minimum for a class to the project, and provides the basic code and configuration for it to work. For details on how to use the generator and what it effects, see Using the Example App's Page and Widget Class Generator. For a quick start, run it like so:

npx yo scrivito

How to build/compile

Calling npm run build will compile all JS, HTML and CSS and place it in the build/ folder. It also creates a build.zip file, which can be deployed via my.scrivito.com.

Documentation

Comprehensive documentation is available at scrivito.com/documentation. Feel free to reach out to us if you have any questions.

Have fun!