Deployment
This section provides some tips and tricks about deploying your application in different environments. This topic is very dependent on your specific application and the environment you are deploying to. The following sections are meant to provide some guidance and best practices. But ultimately you'll probably need to do some custom work to get your application embedding correctly at its final destination.
As core is exposed as an NPM package you can use it in your application by installing it as a dependency. This is the easiest way to use core in your application. The NPM package is published to the public NPM registry and can be installed using the following command.
yarn add @spiffcommerce/core@latest
Vite, Create React App & Other SPA Solutions
A common way to quickly prototype and deploy a UI solution is to use an environment like vite or create react app. These environments provide a quick way to get up and running with a modern javascript application.
IFrame
If you develop an SPA personalization experience you can host it in a statically served site and embed it as an IFrame into your existing e-commerce store. This is a common approach and is supported by most e-commerce platforms. You can learn more about how to embed an IFrame into your e-commerce store here. We use this approach for our hosted experiences, passing information in at the start and out at the end. It works well but we understand the IFrame is polarising and some people don't like it.
Direct Load
Alternative to the IFrame approach you can also load the javascript directly into your ecommerce store. This is a more advanced approach and requires you to be able to host the javascript somewhere that is publicly accessible. You can then load the javascript directly into your ecommerce store using a script tag. When the component is loaded you can immediately render it into the DOM or you can attach a function to the window and call when you're ready to display the experience.
There is a caveat to this approach. When you render your code directly into the page of the ecommerce store you are bound to the styles of the ecommerce store. This means you may need to do some custom work to ensure your UI looks correct in the context of the store. Our recommendation with this approach is to take the baseline css files you use in your store and ensure they're also made available in your testing environment. This makes it much easier to align styles and develop with a better understanding of what things will look like in your store.
Exposing the Client on Window
You may also build your solution out into traditional script files hosted via a CDN. These could be exposed via script tags and executed in whatever way you see fit. Keeping in mind you may like to use the newer module syntax to import the library. You can learn more about the module technique here.
As all interaction with SpiffCommerce is done via our client object. You could attach the client object to the window in a Vite script and then communicate directly via the client object within your native ecommerce framework. As we don't provide versioned CDN links for Core you'll need to build this out yourself as a library export from a solution such as vite.
<script type="module" src="https://my-cdn.com/spiff-commerce-client.js"></script>
Server Side
The core is not bound to a browser environment. It may be used in a server side environment as well. This allows you to build a server side application that operates in a headless fashion using a technology like node.js. You might opt to minimize data required by the client this way meaning you can build a more performant application. You could stream information about the users design to the server using websockets and pass the data to our core for transmission to SpiffCommerce. This is a more advanced approach but is a great way to build a highly performant application while also maintaining control of the version of core and the hardware it is running on.