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.
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.
Sign up for a free trial at my.scrivito.com/signup.
Once you have a Scrivito tenant, it's time to do some development.
git clone https://github.com/Scrivito/scrivito_example_app_js.git
cd scrivito_example_app_js/
Make sure that you have installed.
node -v
# should output something like v18.17.0
Now simply call npm install
in the command line to install all JS dependencies (which are placed in the folder node_modules/
).
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 theSCRIVITO_TENANT
key. The file should then look like this:
SCRIVITO_TENANT=0123456789ABCDEF0123456789ABCDEF
See .env.example
for an example.
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.
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.
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.
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
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.
Comprehensive documentation is available at scrivito.com/documentation. Feel free to reach out to us if you have any questions.
Have fun!