-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add more entry points #1084
Comments
You could render to multiple html elements in reactdom.render(<App1/>, div1)
reactdom.render(<App2/>, div2)
reactdom.render(<App3/>, div3) |
Can you explain your use case in more detail? While you asked this earlier, I wonder if I misunderstood your use case. |
For example, when preparing multiple apps I might want to do index.html for web and touch-kiosk.html for other devices. Basically using components and composition to do multiple apps. For this I need not just few html files but multiple entry points for webpack. |
I would like to be able to create multiple bundles. For example: admin.bundle.js # for admin section in my site
client.bundle.js # for client section Now I am forced to create two applications:
This approach seem to be excessive. It would be great if it was possible to separate the bundles within a single application. |
Thanks for sharing the use cases. We might support this eventually but for now I recommend either separate apps or ejecting and manually configuring Webpack. |
You could do something funky with shell scripting. Not sure how practical this is but it will solve your problem (from how I interpret it). Have two entry point js files, lets go with Have two When you go to run package.json "build": "react-scripts build",
"build-user": "cp src/user.js src/index.js && react-scripts build",
"build-admin": "cp src/admin.js src/index.js && react-scripts build" |
Maybe we could pass entry point to webpack instead? Then add instructions of shell scripting it. |
I ran in to a similar issue today, and there appears to be an easier and more elegant workaround to this, similar to what @tbillington had mentioned. Keep in mind, I am pretty new to React/Webpack/Babel/etc, so forgive me any nube mistakes. You can simulate having multiple HTML files by using URL parameters on the Index.html file. In index.js, you simply parse out the URL param and serve the appropriate React Component into the http://www.myhost.com/index.html?startPage=SecondApp ... it will serve up the The App.js and index.html are the boilerplate created by create-react-app. Index.js
SecondApp.js
This way, everything will get packaged, minified, transmorgrifacated, etc. It seems a lot more palatable to do it this way than ejecting entirely. If you have legacy HTML/Javascript that isn't part of the module system, you put that in the public directory (and subdirectories), and Webpack will just copy it untouched. Let me know if this is helpful. Nick |
I'm also trying to implement a User / Admin scenario. @carruthe, I believe your approach is not working for me because the User part is simple and should be as light weight (code size wise) as possible as it's expected to be accessed mainly on mobile. The Admin part is more complex with more dependencies and expected to be accessed predominantly on desktop. I'd therefore prefer separate JS bundles for Client and Admin. @tbillington, I think your suggestion should work with a bit of extra scripting to merge the separate build outputs into one, or am I passed duct-tape-strength? |
For admin/user use case you can use but I like create-react-app support multiple entry/bundle. |
I agree it's something we'd like to see in the future. |
I've implemented this as proof of concept, so you can try it already by installing
To add a new entry point:
Also I think it's a good first step for prerendred pages. All we need now is to generate Changes: stockspiking@fced96e Known issues of this POC
|
@kohver Do you think it would be best to have a separate html file or using |
My use case of having multiple entry points is that i'm developing plugins for cloud solutions of atlassian (jira, confluence) and all plugins injected into the system by iframe, so in different places like admin panel, main page panel, sections inside issues e.t.c. i need html page, since i want to use react i need to split my app into multiple pieces. It's quite inconvinient to create different folders for each section of the whole app bcs they could be very small and it would be easier to split them into folders by page or section. So the only way to me (for now) is to create my own build process. |
I also have a similar use case as Alexter-progs. I am developing a chrome extension which requires both background.js and inject.js files. At present, there isn't a way for me to generate separate bundles to be able to make a chrome extension. |
If you ask me, application should be separated into logical bundles and modules. It may sound a bit complicated, but let me explain. For example, we want to build large application, with frontend (landing page), customer dashboard and admin dashboard. We'll have 3 bundles, let's call them Module - set of components/reducers/middlewares/actions/etc grouped by logic, e.g. Users, Plans, Notifications, UIKit. Each module could communicate with each other and also be used by bundles only via single I would be really happy if we can have current create-react-app structure as /cc @gaearon |
Hi, using webpack built-in MultiCompiler it is quite easy to run different builds at the same time (including shared cache and quick rebuilding when watching). In the most basic setup it would use the same index.html template and generate index.html, index2.html and indexanything.html from index.js, index2.js and indexanything.js, with minimal page-specific bundles, but using the same output dirs for assets. That would necessitate changing only a few lines in create-react-app react-scripts. I could send a PR as a discussion point, so we could see how it affects testing, routing etc? Somebody more knowledgeable in create-react-app customs could continue from there. It might also be possible to configure source templates, output paths, etc, from package.json fields or file system structure (such as src/pages/indexname/index.js), but I would guess that outputting properly to different paths would need more involved changes depending on how paths are handled in build scripts. I could look into this briefly too, if you have opinions on how it should work... |
I met the same problem, here is my way, it works : Four steps to add multiple entry points to create-react-app(say we add an admin.html): 1. Eject the project
2. Add multiple entry to webpack.config.dev.js
3. Modify HtmlWebpackPluginadd a new plugin node:
4. webpack Dev Serverrewrite urls
detail: http://imshuai.com/create-react-app-multiple-entry-points/ |
Thanks @maoshuai. Works perfectly! |
@maoshuai, Worked out well, thanks. Though I had to change the value of filename to 'admin.html', without the build/ like this... new HtmlWebpackPlugin({
inject: true,
chunks: ["admin"],
template: paths.appHtml,
filename: 'admin.html',
}), |
@Sowed You are right, I had amended it. |
Have some effects when change the output file name? The filename is "bundle.js" definitely in react-dev-utils/webpackHotDevClient.js. |
HI guys. I'm just wonder how you feel about extending webpack.config? Same or similar way as Storybook did it https://storybook.js.org/configurations/custom-webpack-config/? In that way you'll give more power to the end user. I can imagine something like this will kick off creating plugins for react-create-app and it could became quite conflicting. However, I believe this could be handled by some conflict message which warn user whenever overwriting property trying to overwrite already overwritten property. Thanks |
The mentioned questions is not related to the year and bundle version. It is application configuration and with same errors it will be bundled same way today (as before). |
@oklas his point was to show how app bundle can be splitted, not what actually is included in bundle This weekend I experimented with angular-cli. They have a config, where you can add multiple projects For each project you can configure a lot of options Maybe |
Hello Guys, Thanks a lot for your reply, But I am still not clear about the implementation with react application. Let me try to tell you the exact use case of what exactly I want to achieve in my application. Basically I need two entry points in the application one for the mail application and another is for the admin panel. For Ex. Please let me know what is the exact solution I can use which will resolve my problem. if something other then multiple entry points we can do to achieve this without ejecting the application that will also be fine. |
import Loadable from 'react-loadable'
import Loading from './my-loading-component'
import {BrowserRouter as Router, Switch, Route} from "react-router-dom"
const LoadableApp = Loadable({
loader: () => import('./my-app'),
loading: Loading,
});
const LoadableAdmin = Loadable({
loader: () => import('./my-admin'),
loading: Loading,
});
const App = () => (
<Router>
<Switch>
<Route path="/app"><LoadableApp/></Route>
<Route path="/admin"><LoadableAdmin/></Route>
</Switch>
</Router>
) |
In my situation, I have my main App.js using index.html but I also have chromecast-receiver.html for Google Chromecast application, I can't figure out a way to build and bundle my Chromecast App with CRA |
@oklas I have one doubt/question. The solution which you have mentioned in which we are anyway using React Routes. So after deploying build of my application on the server. if I run my application and hit URL https://example.com it will initiate the route and then I can hit any of the URL (/app , /admin), and accordingly, it will load the related component. But If I directly hit the URL https://example.com/app or https://example.com/admin , I think it will search for app or admin directory in my build folder and it will give me an error that Not Found Do we have any solution for this? |
@harshalpandey when having a SPA, in most of cases server should return |
this sadly is still the best solution to avoid to eject maybe is possible to use https://github.com/timarney/react-app-rewired/ and use some webpack plugin / configuration? |
any recommendation for me? |
ugh, let me throw another one at u guys... Electron application where you want 'modals', or, components in different windows, and you want said windows written in React. I have to pass different html files to electron, and it would be awesome if I could have multiple entry points because then my project looks like
It seems to be a real pain to acheive this without ejecting and knowing everything about webpack |
I have to keep pointing out that this is NOT a solution, as it eliminates the possibility of bundle optimizations between entry points. If that doesn't matter to you, then I suppose it's an OK solution. Just don't want to lead anyone astray here. |
Maybe owners should add the repo on issuehunt to collect donations for most wanted features, or fixing issues. |
lol, 'eh' My solution was: use react-app-rewired Config for anyone who needs it in the future
Then in index.js
|
My solution is: scripts on package.json "dev": "react-scripts start",
"dev:admin": "REACT_APP_MODE=admin react-scripts start", and index.jsx import React from 'react'
import ReactDOM from 'react-dom'
import CustomerApp from './App'
import AdminApp from './AdminApp'
const App = process.env.REACT_APP_MODE === 'admin' ? AdminApp : CustomerApp
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
) |
this is the patch I have been using 20a21
> const envEntryPoint = process.env.ENTRY_POINT || 'index';
82,83c83,84
< appHtml: resolveApp('public/index.html'),
< appIndexJs: resolveModule(resolveApp, 'src/index'),
---
> appHtml: resolveApp('public/' + envEntryPoint + '.html'),
> appIndexJs: resolveModule(resolveApp, 'src/' + envEntryPoint),
104,105c105,106
< appHtml: resolveApp('public/index.html'),
< appIndexJs: resolveModule(resolveApp, 'src/index'),
---
> appHtml: resolveApp('public/' + envEntryPoint + '.html'),
> appIndexJs: resolveModule(resolveApp, 'src/' + envEntryPoint), so I can do
|
Perfect, i hope it won't broke in the future |
Another use case for this is when you have a mostly static site and you want to add bits of React here and there while being able to take advantage of webpack and keep the bundles separate. For example, if you have a React form on the homepage of I can understand if this is out of scope for CRA though. |
My use case for multiple entry points is implementing an OpenID Connect silent login in an iframe. The second entry point for the applications is a light weight page that is the result of the login redirect, and communicates with the main page via postMessage. This could be done as an application route or similar, but redirecting to a |
Well. CRA is aiming at SINGAL page Apps, but soon you'll find the js is too
BIG to fit in one page, so split into multiple pages would be a good idea
and all pages could re-use the same login form component etc.
I use a patched version like Vitaly above. Hope this would be implemented
as a standard feature.
…On Sun, Oct 11, 2020 at 9:17 AM Nicholas Steicke ***@***.***> wrote:
My use case for multiple entry points is implementing an OpenID Connect
silent login in an iframe. The second entry point for the applications is a
light weight page that is the result of the login redirect, and
communicates with the main page via postMessage. This could be done as an
application route or similar, but redirecting to a /silent_renew.html> that loads just enough JS to communicate feels a lot cleaner to me than
redirecting to /silent_renew that is a HTML5 route in the main
application.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#1084 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAAHVBEFVPTFKAJNNCK6OOLSKEBRZANCNFSM4CXDVI2A>
.
|
Fort this, you could be using code splitting
… Em 10 de out. de 2020, à(s) 22:12, Francesco Truzzi ***@***.***> escreveu:
Another use case for this is when you have a mostly static site and you want to add bits of React here and there while being able to take advantage of webpack and keep the bundles separate.
For example, if you have a React form on the homepage of mysite.com and you also want React to handle a list of FAQs at mysite.com/faq, you don't want users visiting the FAQ page to load a bundle containing code that is not relevant.
I can understand if this is out of scope for CRA though.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
There is an example above |
I found this post that may help some people with this issue. It seems to work for me. https://blog.logrocket.com/multiple-entry-points-in-create-react-app-without-ejecting/ "TL; DR |
I did it using https://github.com/Derek-Hu/react-app-rewire-multiple-entry in the end. Thank you @danvc and @oklas for the tip, but I wanted to avoid using react-router if possible. |
@ftruzzi looks at this example that I've implemented (without external modules): https://github.com/danvc/create-react-app-multiple-entry-points |
Hello, guys, what about using React in chrome extension development? "content_scripts": [{
"matches": "<all_urls>",
"js": ["./static/js/content.js"]
}] |
Since the <!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
<script> window.__APPLICATION_TEMPLATE__ = "<%= entranceName %>" </script>
</head>
<body>
<%= require("src/partials/getPageTemplate.js")(entranceName) %>
</body>
</html> // src/partials/getPageTemplate.js
module.exports = (appType) => {
if( appType === appEnum.admin ){
return `<div>Admin</div>`
}
} // src/index.js
(async () => {
if( window.__APPLICATION_TEMPLATE__ = appEnum.admin ){
await import("./admin")
} else if( window.__APPLICATION_TEMPLATE__ = appEnum.toolset ){
await import("./toolset")
}
})() here's const HTMLWebpackPlugin = require("html-webpack-plugin")
module.exports = {
webpack(config){
const configTemplate = config.plugins[0].options;
const configForAdmin = new HTMLWebpackPlugin(configTemplate);
configForAdmin.options.templateParameters = {
entranceName: entranceEnum.admin,
filename: "admin.html"
}
// and any other entrances you want.
config.plugins.unshift(configForAdmin);
return config;
}
} So we can have |
I have a proposal about this which provides a conventional way to add multiple entry files. How about treating every js-like file under So if you have a folder structure like this:
Then it will output 3 entry points. |
Hey @yarcowang did you manage to get this to work? Im trying to add two different content scripts (one uses all_frames, other one doesnt), but I cant seem to get it to work. Any ideas? |
@ThisIsntPatrick4312 I'm using |
In addition to src/index.js, I have other entry points in my app. How do I add them?
The text was updated successfully, but these errors were encountered: