I have been building SPAs (Single Page Applications) using React. Whenever I start a new project, I use create-react-app. So far so good.
I now have received a request to load a React application as a widget within an existing HTML page.
My question: how do I achieve this? I can refer to the react files using the CDN links as well as Babel however I am having trouble wrapping my head around packaging this all up using Browserify or Webpack.
Any of you have experience with this already? Perhaps you can share with me what works best.
I have tried googling this with not much luck.
Thank you.
Just add lines to webpack.config.js
...
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
plugins: [...],
....
to exclude React from bundle and then add it at page before your bundle
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
(it will mount as usual to specified HTML element)
Related
We have a <html> file stored on AWS S3. The file contains header and footer information.
This file has it's own build pipeline, we collect some data from a database and generate the HTML and upload to S3.
We would now like to include a bundled React App into this HTML page. I.e. within the body of the page will be the bundled react application.
The React App is built on the latest create-react-app setup and therefore, babel and webpack are pre-configured. The react build creates all the relevant files if the app was hosted without the above setup.
Is there a way to merge the two pages?
**Notes: Specifically looking for a merge as part of the build process. **
We have one project that generates a header html and publishes it onto an S3.
We have triggers that might trigger this to regenerate at specific times/after changes etc.
We have a React App that is bundled with babel/webpack in a production build and produces the output HTML/bundle js etc. All minified and hashed, so the file names are bundle.randomhash.js etc.
We need to merge the two outputs. The html file from S3 needs to include the React App within its body/html.
Ideally in a pipeline/build process. So if one changes, the merge is re-compiled/re-run.
I think you are looking for an automatic way of merging two outputs, one being your existing HTML with header and footer generated from your existing build process and triggered via a database.
The second being your react app which is a well finished final output that comes out of your create-react-app build infrastructure.
In such a case, I would recommend to use this very popular tool called gulp-inject. gulp-inject takes a stream of source files, transforms each file to a string and injects each transformed string into placeholders in the target stream files.
An example is given below:
Let's say your target file is called index.html like this
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
Your gulpfile.js script would look like this to achieve a new index.html with new insertions automatically based on this script.
var gulp = require('gulp');
var inject = require('gulp-inject');
gulp.task('index', function () {
var target = gulp.src('./src/index.html');
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
});
Your final output of your index.html would look like this after running gulp index:
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<link rel="stylesheet" href="/src/style1.css">
<link rel="stylesheet" href="/src/style2.css">
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<script src="/src/lib1.js"></script>
<script src="/src/lib2.js"></script>
<!-- endinject -->
</body>
</html>
The basics of converting an existing HTML file and inserting it with ReactJS code is given below. I think if you apply these principles and use the gulp-inject tool, you can achieve wonders.
https://reactjs.org/docs/add-react-to-a-website.html
Your exact build automation maybe driven by your own tool such as Jenkins or such similar tools where you could chain one event with the other. For example, you could check whenever a new HTML file is automatically generated by your Database Triggering on AWS and once that event is received, you could trigger either the Gulp-Inject script if you already have the React Component(s) ready or trigger the Create-React-App to freshly build the React Component and then apply the Gulp-Inject script to inject your React Component or React Code into the index.html or whatever the name of your html page.
The npm package for gulp-inject can be found here.
https://www.npmjs.com/package/gulp-inject
Hope this helps. Let me know.
If you like the answer, you can accept it.
To do this you need to host your js, css, and media files from your react build folder in an S3 bucket and add the following to the code.
<html>
..... your static html code
<div id="the id used to bootstrap your react app (from the index.html file in the public folder)"></div>
......
links to all the files in your JS, CSS And media files from the react build folder
</html>
I would suggest to use hosted images (you can host them on S3 as well) and assets as much as possible so you don't need to add the media file links on by one in the html file.
You may want to look at this link on how to bundle all files into one file when building your react app (I haven't tried this part).
I am new to using reactjs. I have an html file where i am trying to enter a react component . The react is described in two files: index.js which is "importing" a main.js file.
i want to have those components in my webpage. Can anyone tell me how can i do it ?
I tried using a script in my html file :
script src="index.js"
but it is not working.
I am totally new to this .
Reactjs is a group of components which bundled together to make a single page app.
I suggest reading the documentation of Reactjs
React js library is used to build a single page application. And it is a component-based library. You write your components and then render them into a single HTML div tag.
You should start your react journey with create-react-app boilerplate (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app).
I was trying to import bootstrap's css and material design's one into my angular application but i found at the same time an issue and a compromise.
If I include them with "link href" in my index.cshtml file, I get as
result that this prevents my angular app from loading.
If I include them with #include into my main .css file (which is
called by require("style-loader!./styles.css"); ), it actually
works but this prevents my app from parallel .css download and the
result is that - yes, it works - but that slows my app a lot.
I saw that lot of people include them into the proper angular-cli json file but my app is not an angular cli application so I actually can't do that.
So the question is: can you suggest me what's the best way and the best practice to include the css in a non-angular cli application?
OTHER INFORMATIONS:
I am using also webpack, don't know if this changes or means something for my question
One thing good to know about the angular CLI is that in the background it makes a call to webpack to bundle your application with bootstrap
(if you put the proper line in the angular-cli.json file
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
)
As you are not using the angular.cli.json file, you have to directly import the bootstrap framework with webpack. A link which might help you to import boostrap with webpack : https://getbootstrap.com/docs/4.0/getting-started/webpack/
I hope it will be helpfull !
I have setup the cross browser extension boilerplate
https://github.com/EmailThis/extension-boilerplate
I want to be able to load html content inside my javascript code example
import contentTemplate from "../content.html";
I have found some plugins but they all work with webpack,
how can I do the above without webpack ?
I have done that with the following plugin
https://www.npmjs.com/package/babel-plugin-transform-html-import-to-string
I am in serious need of your you.
My application is working on an old environment, then I moved the same source code to a new environment. It seems (guessing) to me that the stylesheet and images couldn't be loaded on the new environment even though the source code is the same.
Any suggestion and help are highly appreciated.
Some notes,
i. the old working environment is NodeJs 6.11, Angular2 and
Angular-cli 1.0.0
ii. the new not-working environment is NodeJs 8.4, Angular4 and
Angular-cli 1.4.3
iii. I put the bootstrap on local
"app/css/bootstrap/dist/css/bootstrap.min.css"
Expected first page with style and logo. This is still working on the old env:
I got the plain mark-up below on the new environment. All the styles and images are gone. The firefox console on the right hand side showed that those are not loaded. Will it related to the new version of Webpack?
My code - app.component.html
My new not-working package.json
My index.html
Please kindly help. I am a beginner on HTML and AngularJS.
Please kindly let me know if I need to provide more information or I need to upgrade some modules.
Best regards,
Autorun
Move your css styles, images and javascript files inside the assets folder in the latest version of angular-cli.
use your images like below from assets folder :
<img alt="image" class="img-circle" src="assets/iamges/logo.png">
And add your stylesheet and javascript file inside the .angular-cli.json
"styles": [
<!-- "assets/css/style.css" from assets folder -->
<!-- "../node_modules/bootstrap/dist/css/bootstrap.css" from node modules -->
"styles.css"
],
"scripts": [
<!-- "../node_modules/jquery/dist/jquery.js" from node modules js files -->,
<!-- "../src/assets/js/javascript.js" from inside assets files-->
],
After changes restart your porject.
This is to continue on Chandru's answer. It works. Please see the screenshot of my change. Since I can't post screenshot in comment, I hope it is ok to post here.