I am using react's create-react-app for my new application.
I am really getting confused to separate index.html page for client side and admin panel.
I have different functional flows and css files for both side.
So index.html file should be loaded based on router navigation.
Example:
http://example.com => should load client/index.html
http://example.com/admin => should load admin/index.html
Note: i have tried webpack's multiple entries method and webpack html plugin. But it only separates bundle files not html(while navigate).
Please help me out.
webpack just a module bundler, It doesn't control which page show, This should be done by router.
if it's single page, you can use react-router
if it's multi page, you can use express route
after using the below code to include the external scripts, I don't really want any additional html pages.
var $script = require("scriptjs")
$script("/myscript.js")
Related
I have a question.
I am making an Universal React App and I understand the concept.
We take the best of the CSR and the SSR method to make a commun code for the front-end and the back-end.
We also split the element of a web page (HTML, CSS and JS) to the side who manage it the best.
So I did like this: the HTML is rendered by the back end and the CSS and JS by the front end on the browser.
That is on development mode because i use Webpack for bundle management and on this mode, i use a plugin to inject the css directly to the DOM by style markup (style-loader for HMR support)
But here's the trick, Webpack recommend extracting the css files to separates files on production mode. (by html-webpack-plugin and mini-css-extract-plugin)
So I need to inject the separate css files to the DOM by the link markup.
My question is doesn't it break the whole concept of Universal (Isomorphic) app by giving the CSS to the back end?
What is the configuration of an Universal React App on production mode?
Thanks in advance for your response.
I had a template, that I wanted to convert to React JS components, and I successfully did that. As all of us know, that there are bunch of libraries used in a template. What I first did is, I inserted the .css and .js libraries into the react app through the index.html file, in the public folder of the create-react-app boiler plate. It successfully used the styles and scripts from the inserted .js and .css files. But the problem occurred when I added routing to the react app.
When, I navigate to another route through a link, the component loads, but the required styles and scripts doesn't loads. I don't know what the problem is. I tried to import the scripts and styles to the parent component which is home.js. The styles worked properly, but the libraries used in template are :
bootstrap.min.js,
eva.min.js,
feather.min.js,
jquery.min.js,
jquery-slim.min.js, and
popper.min.js.
On each import of the above libraries, it shows different errors. But as an example, for jquery.min.js it shows the following error :
In public folder add the following code in of the index.html page.
<base href="/">
I have a React / Typescript / Webpack / React-Router app that includes some fairly large JS modules. I currently include 2 bundles (common.js and app.js) on every page. common.js is a CommonsChunkPlugin bundle.
However, there is a fair amount code in common.js that is only necessary on very few pages of the site, and I do not want to load from the server, or import them, them unless they are necessary. I am fine with specifying exactly which pages need these libraries.
I have successfully split the "big" libraries out into their own bundle (big.js) using webpack, but I do not know how to conditionally include it so that it only loads when I request it. Seems like I have to conditionally include it in React somehow?
How do I dynamically include a webpack JS bundle only on certain React components?
Have you tried Dynamic Imports With Webpack 2?
We're attempting to create a PHP Laravel application using ReactJS as the view for each page. Laravel handles the routing and the presenting of each view. Each view loads a react js bundle.js file. Each bundle.js file is custom to that view and inside contains the react components needed for that view (screen). What were finding out is that each bundle.js file is about 4MB because each contain its dependencies as well as the components. Also were still trying to figure out how to share a component such as a TableComponent.js file across multiple views but have been so far unsuccessful.
Are we architecting this totally wrong? Should there always be only one bundle.js file for the application as a whole?
Or are there good fixes to remove the dependencies from each bundle.js file in a single dependency js file that gets loaded for all views?
Is there a good way to reuse ReactJS components accross multiple bundle.js files ?
Sounds like a perfect case to use Webpack which is an amazing bundling tool, here is an example on how to build multiple entries(pages):
https://webpack.github.io/docs/multiple-entry-points.html
You just write your entry point code, and webpack will figure out the details on how to build shared dependencies of different entries(pages) into a common bundle.
I am trying to build and app using Angular 2 which has several tabs. I want one of these tabs to be as the already created angular 1.3.17 app. More specifically, I want to embed Netflix Vector into one of my tabs. My Angular 2 app is uploaded here (at the moment does nothing) here. Would this be possible?
I don't intend to have any interaction between the Angular 2 components and Angular 1.x. I simply want to embed it.
I also tried the following:
The way to run Netflix Vector is simply doing a gulp build and then running a simple server inside the dist directory.
So, to ease the way of embedding such a large application, I tried to put the dist directory inside my angular 2 component directory and then just modifying the index.html to remove the inclusion of scripts and css. I loaded those scripts and css through my main index.html.
Then I loaded index.html through my angular 2 component. I have made sure that the angular libraries and all other js files are loaded. However, it doesnt seem to work just by providing a ng-app directive inside index.html