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.
Related
Is hot reloading possible while mounting react components into our Django template?
As part of improving our UX, we are adding react component to our page to bring dynamic content on every customer interaction.
I have successfully set up the react inside our Django and placed bundle.js into a static path using Webpack. Now using Webpack watch we are able to load the latest changes on the page.
In this setup, we can't bring hot reloading and source in the browser devtools console to debug and speed up our development.
Note: The application is not a SPA also not a Restful design for now.
Background
I often use "React Developer Tools" to understand the component structure of various website that I like and take inspiration from. Though, lot of websites have random names for the components, few websites have distinguishable names which can be helpful for aspiring React Developers or hobbyists. One such website is https://www.joshwcomeau.com. Below is a screenshot from one of the pages in his website. The name of few of the components explains itself what it is going to render. And since this is his blog, where he talks about various tips and tricks for React Development, it becomes helpful to have a look at this.
Question
Now when I develop a website using create-react-app(CRA), all my component names are minified to a couple of random letters by Webpack. How can I control this behavior?
Note: My main question is - How to control this behavior in any React application (not just CRA). I know that Josh uses Next.js for his blog, so does any framework like Gatsby, Next etc... provide control over this?.
Note:
I'm aware that the component names are visible in development mode, but I would like it to be visible in production too (for the reason explained above in "Background").
I'm aware that webpack can generate "sourcemap" but doing that would expose my entire code structure. So I prefer not to use sourcemaps
Screenshot of Josh's Website
Screenshot of My Website
You can achieve this with a third party library:
From webpack-react-component-name documentation:
Normally React component names are minified during compilation. This plugin makes these component names available in production bundles by hooking into Webpack's compilation process, traversing the AST looking for React component definitions and updating the emitted source code to populate the displayName property. This is the property that, when populated, is used by the React Dev Tools extension to determine the name of a component.
So you can install this webpack plugin with:
npm install webpack-react-component-name -save-dev
once it is installed, add the plugin to the plugins list in webpack configs:
plugins: [
new WebpackReactComponentNamePlugin()
],
I'm looking to embed my react application into an existing plain html / javascript website. What I've found so far is that you are only able to embed individual components into existing websites, not entire react applications.
Naturally I have an app component which contains the entire application. Am I able to embed the full application by embedding this component? My concern is all the modules I'm using (e.g. axios, bootstrap) will break.
I've been looking for a good tutorial on how to do this but I'm not finding many examples of trying to embed the entire application into an existing page.
My understanding of how to do this, is to reference the react javascript source links in the html page head, possibly also babel although its unclear to me if babel will work. Then we can use the renderDom method like we normally would.
On page load can I run my index.js file to insert my react app component into the dom? If this would work, are there any issues with file structure, file updates I would need to take care of?
If I'm driving off path out into the wilderness and there is a better way to handle it I'm open to suggestions. I'm just looking to see if someone else has experience doing this before I start down a bad path.
I was able to embed my full react application by doing the following...
I built my react app production files with npm run build
I copied those files into the existing web project at the root level
Then I opened the index.html file generated from npm run build and copied the scripts in the head and body sections to the page I wanted to drop in my application
Finally I added a div with the id root (this is what my renderDOM method is looking for) where I wanted my application to appear on the existing web page.
That was it. Super easy, thanks for the help!
Just wanted to add a quick additional approach here.
If you already have a Flask app and you're trying to put React components or an app (so the base component of an app) onto an existing HTML page in the Flask app, basically the only thing that you need is Babel, unless you are able to write React components without using JSX (so in plain Javascript) in which case you'd need nothing.
Step 1: To attach Babel to your project, you'll have to grab the Babel node modules which means your project will be associated with NPM for the sole purpose of using the Babel functions. You can do this by running the following commands in your project root directory (Node.js must be installed):
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
Step 2: Once Babel is attached to your project, you'll have to actually transpile the existing React component .js files from JSX into plain Javascript like so:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Step 3: After the plain Javascript versions of your React files appear, make sure they are linked to your HTML page instead of the original JSX-utilizing files (replace the original script tag's .js file)
Step 4: Make sure the HTML page in question is linked to the .CSS files you want (they will modify the transpiled Javascript in the same manner as they did the JSX files in a project made using Create-React-App because the class names are the same) as well as the required React resources:
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
After you do those quick steps your React components should render no problem on that page in your Python-Flask application.
We have a common widget in each of our pages across multiple services, and we want to write a common client-side rendition code in ReactJS for this widget as an external hosted js, such that each of the pages can include this externally hosted JS in their pages to render the widget. But many of these pages are written in different JS frameworks (angular/inferno/typescript/etc) or even in plain vanilla JS. Now pardon me if this is an ignorant question, but I think that ReactJS code can be compiled into javascript using babel, and the bundled js file can then be directly included in any page using any framework(angular/typescript/etc). Is my assumption correct, or will such an approach lead to problems. Any other inputs?
PS: I am very new to any of these JS frameworks, and have only worked on small projects involving plain vanilla JS.
You can mount your react root node (typically <App/> ) in any html DOM node. This is what react-dom does by
render( <App />, document.getElementById("root"));
which would be a familiar line for you.
Now, coming to how to actually do this. I assume you are using create-react-app.
Run npm run build inside your project folder.
When it finishes, you will find a bunch of files inside your-project-folder/build, including
build/index.html
build/static/js, build/static/css, etc
Open the build/index.html file in a text editor and study it. I think you will be able to figure out the rest.
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")