Installing an App

Just like you install apps onto your smartphone, you can install apps into your site.

But unlike your phone, you have full control of the code. Think of these apps as starter packs for you to create something unique on the web.

For instance, if you start with the Blog app. Sitecast will automatically configure much of the database, screens, and blocks for you. But to make the blog truly yours, you will want to adjust the HTML, CSS, and possibly the Javascript.

While the starter apps work great out-of-the-box, customizing the front-end code is where you will find the most value.

Your first app

Ready to build your first app? It's simple.

Sitecast Apps

When you first create your site, you will be presented with the option for creating a blank app or to install a Sitecast starter app.

If you installed a blank app, all the default files such as application.html, main.js, main.scss, sitecast.config.yml will be created.

If you installed a pre-built app, you can configure the front-end design freely and add more screens, blocks, item types, and more from the IDE.

Managing Dependencies

Inside of your sitecast.config.yml file, you will find your external stylesheets and scripts. Every time you update and save this config, the styles and scripts will automatically recompile and update in your dev environment.

By default, the Sitecast config will look something like this:

  - "npm/[email protected]/dist/css/bootstrap.min.css"
  - "npm/[email protected]/css/font-awesome.min.css"
  - "npm/[email protected]"
  - "npm/[email protected]"
  - "npm/[email protected]"
  - "npm/[email protected]/dist/js/bootstrap.bundle.min.js"

Heads up: If the file is not saving, there is something wrong with the config and the bundle cannot be compiled. Remember, this is a Yaml file, so spacing for each line matters.

These files are stored in permanent storage and delivered by the excellent JSDelivr CDN. The first few requests may take a moment to compile, but once the CDN takes over, the delivery time should be quick.

You can leverage either NPM or Github as your source for your package files. And can simply be referenced by prepending the line with npm/... or gh/..., and the system will find the corresponding package from that repository.

For NPM, the format for accessing a certain package is as follows:

npm/[email protected]

But sometimes, as seen with the beta V4 Bootstrap files, you must point directly to the file you'd like to include.

If for some reason the package isn't included in NPM, you can access it via Github. This is handy when you have a custom script you'd like to include and don't want to go through the hassle of sending over to NPM.

gh/username/[email protected]/path/to/file/bundle.js

So for instance, if you wanted to access the Github version of the V4 Bootstrap script, you would do the following:

gh/twbs/[email protected]/dist/js/bootstrap.bundle.min.js

Once the above is saved and compiled you can reference the external dependencies inside your application.html file as follows:

{{ current_app.external_stylesheets_tag }}
{{ current_app.external_scripts_tag }}

These short snippets will automagically create and embed the bundled tag into your site.