Host Your App Externally

Murano can be used with mobile and existing frontend applications provided the Cross Origin Request Sharing (CORS) settings on your application are configured properly. After modifying your Project's CORS settings, you can request your data through Murano by interacting with your API directly from your application. If you are integrating Murano into a backend application, configuring CORS is not required and you can interact with your API directly.

This guide will go through configuring your CORS file with the murano CLI tool.

CORS is a way to mitigate cross origin attacks in the browser. Want to learn more about CORS? Click here.

CORS by Example

In this example, you can make requests from https://exosite.com to Exosite's Application API, which is hosted at https://<applicationName>.apps.exosite.io. You will only use the API portion of the application. It will not host any frontend files. Depending on the initial configuration of CORS in your application, these requests may succeed (if origin: true is set in your cors.yaml file).

Initial Assumptions

Note: Ensure origin: true is not present in the cors.yaml file. If origin is set to true, all requests from all domains will be allowed. If your default cors.yaml file is configured this way, modify the origin line to the following:

origin:
- http://localhost:3000
- https://exosite.com

The complete cors.yaml is as follows:

$ cat cors.yaml
---
origin:
- http://localhost:3000
methods:
- HEAD
- GET
- POST
- PUT
- DELETE
- OPTIONS
- PATCH
headers:
- Content-Type
- Cookie
- Authorization
credentials: true

Run mr syncup --cors to sync your cors.yaml file changes.

Make the Request

Note: In the web console, you will use the fetch API due to clarity. This may not be available in your browser. You can view the browser support here. An alternative is XMLHttpRequest.

  1. Go to https://exosite.com, open the developer console, and type fetch('https://<applicationName>.apps.exosite.io/test') in the console. You will get an error similar to the following:

    cors request

    This means that the remote URL (Exosite's Application API) is not configured to accept requests from the exosite.com.

  2. To enable exosite.com to make requests to your application, modify the origin line of cors.yaml to be as follows:

    origin:
    - http://localhost:3000
    - https://exosite.com
    
  3. Run mr syncup --cors.

  4. Go back to the browser, then run fetch('https://<applicationName>.apps.exosite.io/test'). Instead of an error, you should see a succesful GET request.

cors request

By setting your CORS configuration to allow requests from https://exosite.com, you could successfully request resources from other domains.

Enable on Your Mobile Application or Existing Frontend

The same techniques used above can be used to request data from your Murano API. Simply make requests to your application's API using your frontend client or your server to gain the benefits of IoT in your current application without migrating your entire frontend.