Is it possible for use React to build the experience views app?

Hi there,

Just had a question, is it possible to use React to build out the experience views app without using hbs templates and use vanilla js?

Thanks,

@Suroor_Wijdan,

Yes. This is possible and a more advanced use case of experiences.

If you do want to use a single-page application framework to build your application experience, you’ll need to either host the front-end files elsewhere and bring them into your Experience Pages.

The other method is to adjust your build / deployment process to push your work up to Losant Files whenever you publish changes. The Losant CLI is a valuable tool if you go that route.

I’m happy to answer any more questions if you have them!

Hi @anaptfox.

Thanks for the quick response.

So if i am right, we would need to build out the standalone SPA and then just include the build files into the main experience layout to render the app.

I assume, in that case we won’t be able to use the Experience Reply node in the workflows and everything would need to be done through the API endpoints we create.

Is there a sample deployment process or a project with an SPA on Experience views? If not, no worries and Thanks!

@Suroor_Wijdan,

Yes. That’s exactly correct! Due to the flexibility of front-end frameworks and build processes, there isn’t a great example. However, I can offer some tips from engineers on our team who have done this:

Building an Experience API

When building a SPA Experience, we recommend prefixing your API routes with “/api”. Like so:

/api/devices

This offers a clear separation between SPA routes and API routes.

SPA Routing

Routes can contain wildcards. Wildcards all you to match any request. Like so:

/{var*}

Routing is also based on specificity. This means that all of your API routes can trigger their own logic. Your wildcard route will catch any thing else (in this case, your SPA routes). More here:

https://docs.losant.com/experiences/endpoints/#route

That’s great. Thanks for all the help and inputs @anaptfox. These will surely help me get started with the advanced use case we are building.

1 Like