Nuxtstop

For all things nuxt.js

App hosting with the Contentful App Framework

#contentful #webdev
App hosting with the Contentful App Framework
5 0

I'm cross-posting this article for my Colleague David Fateh. Check out the original post over on the Contentful Blog.

When you develop an app for Contentful using the App Framework, you create a single-page application that runs inside an iframe and shows up in the Contentful UI. Previously, hosting an app on the App Framework was only possible through third-party solutions. Today, we are announcing an easier method to host your app called app hosting!

App hosting takes the hassle out of finding a hosting provider for your app. We have provided developers with a tool to upload their application in bundles which provides for many great development features.

An app bundle is your single-page application directory. Each bundle should contain at least an index.html file, which will serve as the main entry point for your application to load. A typical bundle's file tree will look something like this:

build
├── index.html
└── static
    ├── css
    │   └── index.css
    └── js
        └── index.js
Enter fullscreen mode Exit fullscreen mode

Where build is your root directory and, inside it, there is an index.html file, along with any assets such as CSS and JavaScript that would get loaded alongside your index.html file.

While there are many ways to create apps, we provide a quickstart tool, the create-contentful-app, which can get you a jump-start on your app. If you aren't familiar with building apps, I'd suggest checking out our livestream where Felix and I build the Contentful starter tutorial app.

Now, let's take a look at the three easy steps to bundling and hosting your own app.

Step 1

If you built your app using the create-contentful-app or create-react-app, you can simply run

npm run build
Enter fullscreen mode Exit fullscreen mode

If you built your app using another tool or from scratch, your directory structure will need a minimum of an index.html file at the root.

Again, a simple app directory structure would look something like this:

build
├── index.html
└── static
    ├── css
    │   └── index.css
    └── js
        └── index.js
Enter fullscreen mode Exit fullscreen mode

Step 2

Navigate to your app's AppDefinition found in your organization settings.

Step 3

Toggle the app hosting option found under "Frontend" and drag and drop your build directory into the highlighted area like so:

A gif showing how to toggle the app hosting option found under "Frontend" and drag and drop the build directory:<br>

That's it! Your app is now hosted via Contentful. In the Bundles tab, you can check out multiple build versions and revert to an older version of your app in case you need to roll back changes.

Screenshot of what app bundles look like in the Contentful app

While uploading an app is easy, there are some common errors that could occur:

  • Your app doesn't have an index.html file in the root of the uploaded bundle.

  • You are uploading a Zip that encapsulates the root directory instead of the content directly. Most of the time, the common fix is to navigate into your root directory, select all your files, and zip it at that level.

  • Your upload succeeds but the app doesn't load or appear in the UI. This could be caused by an error in your app's index.html or the JavaScript that it executes. A look at the developer console should provide some hints.

To learn more about the technical details of app hosting, head over to our documentation.

Launching app hosting on Contentful is another step forward in our vision of creating an extensible and cohesive set of tools that connect our projects and our content. If you want to chat about what you're working on, feel free to ping me on our community Slack where I work with fellow developers as we take steps to make our App Framework more accessible and versatile for everyone.

Add comment