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
-
Thanks for sharing! 🤩
0 -
That's cool. Thanks for sharing.
0 -
Thanks for sharing! Please share the index.html file as well for a quick reference.
0
Please sign in to leave a comment.
Comments
3 comments