SaaSBox
Search…
Embedding a React Application
It is possible to create a standalone React application with no user login or management, no dashboard, and instantly make it a SaaS app using SaaSBox. In fact this is the main use case for SaaSBox, you can focus on your application logic, and embed it inside your user dashboard to get all the benefits of users, payments, dashboard portal and so on that it provides.
Create-React-App instance embedded in the user dashboard
Let's get the above example working. Embedding a React App works as follows.

Create the React application

1
npx create-react-app my-app
2
cd my-app
Copied!

Build the application for production

As of this writing below command would create your React assets as well as an index.html under the /static directory:
1
my-app> npm run build
Copied!

Embed the application in your User Dashboard

First, follow our Command Line Interface guide to download your SaaSBox application template and the ability to push files to your application. This is how we will deploy your SaaS template that includes the React application in it.
Copy over your React application build output files into your template. A suitable directory would be: your-template-name/assets/reactapp
1
my-app> cd build
2
build> cp -a static ../../default-theme/assets/reactapp
Copied!
Run html2pug and pugfix.py on your index.html
1
build> npm install html2pug
2
build> html2pug < index.html > index.pug
3
4
# Pugfix wraps all resources with the required asset() helper
5
# Also fixes all Tailwind class references with _ so they work with Pug.
6
build> ./pugfix.py ./index.pug
7
Copied!
Copy over the contents of index.pug into the dashboard page where you want to embed the React application:
    1.
    The main script goes under the block page_content section.
    2.
    The script assets go under block footer section.
    3.
    The CSS reference can go under the block head section.
Finally, since we copied the static directory contents under the reactapp directory under assets, we ought to fix the asset() references to begin with the reactapp directory name instead of static.
Here is the original file for one of the default dashboard pages in the default template:
1
extends common/sidebar.pug
2
block head
3
include common/head.pug
4
+head(title)
5
6
block page_content
7
p Page 1!
8
9
block footer
10
script(src='https://cdn.jsdelivr.net/npm/apexcharts')
11
script(src=asset('app/js/charts-demo.js'))
Copied!
Here is how it looks when we copy over the Reactapp index.pug
1
extends common/sidebar.pug
2
block head
3
include common/head.pug
4
+head(title)
5
link(href=asset('reactapp/css/main.9d5b29c0.chunk.css'), rel='stylesheet')
6
block page_content
7
noscript You need to enable JavaScript to run this app.
8
#root
9
script !function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],f=0,s=[];f<i.length;f++)a=i[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"ebd94a99"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmy-app"]=this["webpackJsonpmy-app"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var p=c;t()}([])
10
block footer
11
script(src=asset('reactapp/js/2.14f31373.chunk.js'))
12
script(src=asset('reactapp/js/main.e1d67807.chunk.js'))
13
script(src='https://cdn.jsdelivr.net/npm/apexcharts')
14
script(src=asset('app/js/charts-demo.js'))
Copied!
Now you can push your template to your application:
1
cd default-theme
2
sbox -d -a .
Copied!
You are done embedding your first React application in SaaSBox! This will enable you to see the React application inside your user dashboard in SaaSBox as shown at the beginning of this guide.

Final Tips

The React Logo won't show properly due to the logo reference not working - you can easily fix this by replacing the logo reference inside your App.js as follows
App.js
1
import { ReactComponent as Logo } from './logo.svg';
Copied!
And refer to the Logo as a component as below, replacing the <img> tag.
App.js
1
<Logo className="App-logo" alt="logo" />
Copied!
Rebuild and copy over again:
1
npm build run
Copied!
Last modified 4mo ago