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

7

• 

  Mariana Cañavera H.

  community manager

  • April 21, 2022 09:06

  

  

  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

Please sign in to leave a comment.