Sivert Bertelsen (ICP)

inriver champion

• April 21, 2022 08:18

To develop advanced HTML templates using react and typescript it is necessary to have multiple files and folders.

Using gulp it is possible to compile advanced single page applications (SPA) folder structures to a single HTML file that can be deployed to inriver.

Here is a tutorial for how to setup an app and deploy it to Inriver.

First, create the app as explained in this guide

npx create-react-app my-app --template typescript

Add this gulpfile.js to the solutiuon.

var gulp = require('gulp');
var fileInline = require('gulp-file-inline');
gulp.task('html', function () {
    return gulp
        .src('my-app/build/index.html')
        .pipe(fileInline({
            js: {
                minify: true
            },
            css: {
                minify: true
            }
        }))        
        .pipe(gulp.dest('./html_inline'));
});

gulp.task('default',gulp.series('html' ));

Next, build the app and run the gulp file

npm run build
cd .. 
gulp

This creates the file index.html

Now go to the control center, create an HTML template and load the file

Now go to the inriver portal to see the result

8

• 

  Mariana Cañavera H.

  community manager

  • April 21, 2022 09:06

  

  

  

  

  +4 more

  Thanks for sharing! 🤩

  0
• 

  Pathum Madushanka

  • June 07, 2022 23:33

  

  That's cool. Thanks for sharing. 

  0
• 

  Sarvani Thatiparti

  • September 16, 2022 03:01

  

  Thanks for sharing! Please share the index.html file as well for a quick reference.

  0
• 

  Micah Jank

  • May 19, 2023 18:44
  • Edited

  Note as of May this is no longer something that will work. 

  Via inRiver Release notes May 6th - May 7th, 2023 / Release notes – inriver community

  Improvements and/or enhancements for Control Center:

  • As a user of Control Center, I want REST API Extension actions to be logged in Control Center logs
  • As a Control Center user working with the fields of an entity in the model, I want the ability to see the FieldTypeId parameter in the list of fields so that I can more easily understand what field to work with.
  • Correction for Control Center when the user is unable to save more than one row of name and description for a FieldSet after first save
  • Please note that input validation for HTML templates is enforced - restricted strings are system.io, wwroot and stacktrace. Uploading an HTML template containing these strings will trigger a "Not Acceptable" error. This validation will be enforced via Remoting API soon as well.

  The output from the react builds contains references to "prepareStackTrace" and because stacktrace is now a restricted string the inRiver html templates will not save. 

  The best workaround i have so far is to create another script to remove references of StackTrace from the build output and then just run that script as a part of the build process.

  "gulp": "gulp && node remove-prepare-stack-trace.js",

   

  0
• 

  Sivert Bertelsen (ICP)

  inriver champion

  • May 19, 2023 19:56

  Thank you for sharing this workaround. Do you know what the reason for this limitation of restricted strings is?

  0
• 

  Micah Jank

  • May 19, 2023 20:13

  Not sure on the reasoning exactly, I assume it conflicts with something on their side like a reserved keyword perhaps. 

  0

Please sign in to leave a comment.