I am converting React client-side rendering to SSR using Next.js but unable to load bundled files in my main view file.
These are not working on my end.
<link rel="stylesheet" href="/js/bundles/server-side-components/out/_next/static/css/*.css" />
<link rel="preload" href="/js/bundles/server-side-components/out/_next/static/chunks/*.js" as="script" />
<link rel="preload" href="/js/bundles/server-side-components/out/_next/static/chunks/pages/*.js" as="script" />
Background:
I am using laravel and frontend React.js.
In laravel view (blade file). I have included react bundle file like this.
<script type="text/javascript" src="/js/bundles/SocialApp/dist/main.bundle.js?v=xxxx.xxx" async></script>
Everything is working fine.
For performance, I wanted to move some components to Server-Side Rendering with Next.js.
I have removed the specific routes from react and moved these components to Next.js directory Pages folder. For Exmaple, If I wanted to move /example route to SSR then, I have created a file with the same name (example.js) into pages directory of next.js and compiled the code.
If I start next.js server separately, like http://localhost:3000/example. Server-Side rendering working perfectly fine. but I don't want to start next.js server separately and wanted to include build files into my main directory like I am doing with react bundles.
How can I achieve my goal?
Related
i built a Homepage using the Django templating engine and on one page is a js application i wrote. Now i moved to a Frontend <-> Backend architecture with React and Django-rest-framework.
The Application i had in Django was served as a .html file with <script> tags for the js part.
Now i moved to React and i'm serving the html elements through a React component and through React-helmet i'm adding the <script> tags for this specific page. The actual .js files reside in the /public folder of react.
I thought i can replicate this way the old structure. But now i get Errors that the .js files can't import classes from the first external script.
What could be the difference in this setup ?
Django:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src="{% static 'path/to/file.js' %}"></script>
...
React:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src={process.env.PUBLIC_URL + 'path/to/file.js' }></script>
...
The Error Message at React is that my file.js can't find the import from the first <script>. But in Django there is no problem.
the import statement in file.js is:
import { QuantumCircuit } from "quantum-circuit";
Thank you in advance for every answer :)
It seems that the first external script is not ready when my custom scripts are trying to call it.
I fixed the issue using the useEffect hook. It calls the external script and if it's ready i'm calling my custom scripts.
Despite i was able to resolve this issue, i'm wondering why this hasn't happend in Django before.
I've got an app that is a part of a larger system. My app is distributed as a JS file, that is later embedded into HTML of another page. I don't have control over that HTML file.
I want to add a font from Google Fonts into my app. I have a link to a stylesheet that imports and declares the fonts.
I've tried using createGlobalStyle from styled components or a CSS file referenced inside the file with main React component, to no avail — the font doesn't seem to be loaded, possibly because #import declarations have to appear before other declarations, and my CSS is inlined into a random place in the document.
How do I insert them as before any other CSS?
The solution to my problem was to add <link rel="stylesheet" src="..." /> into the head using react-helmet.
<Helmet>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
</Helmet>
Just starting learning ReactJS. I'm trying to redirect using the Redirect component <Redirect to="/dashboard" />. However, ReactJS is not familiar with this component by default (getting Redirect is not defined on console log).
After some reading, I saw that the Redirect component needs to be imported (import React from 'react'). However, since it's a web project, I do not use a webpack but rather import the entire library with:
<script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
So my question(s) is how do I use Redirect for a web project, or rather how to import components for a web project for ReactJS.
Redirect component is not part of react. import React from 'react' is importing the react object which contains things like React.Component.
I'm assuming you mean Redirect from react-router in which case you should also add a script for react-router-dom and reference via ReactRouterDOM.Redirect.
P.S. If you're creating something you intend to release you're better off generating a project with create-react-app. Nobody uses scripts directly anymore and you are using development versions of babel and react which are slow and large.
Is there a way to achieve this? I use react.js in the front end only and want to keep it like this.
When you build your application via Yarn/npm, that's what basically you'd be doing. The system will bundle your assets and generates an HTML file. If you open the built index.html you should see your parsed React app in plain JS and HTML.
If you plan to put the build on a CDN, all you need to do is move the assets (JS and CSS) and the index.html wherever you want to host them. Ensure that <script> and <link> are pointing to the bundled assets within your index.html.
<script type="text/javascript" src="/static/js/your-bundle-main.js"></script>
<link href="/static/css/your-bundlemain.0a265734.css" rel="stylesheet">
You can use unpkg, is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:
<script src="unpkg.com/react#15.3.1/dist/react.min.js"></script>
<script src="unpkg.com/react-dom#15.3.1/dist/react-dom.min.js"></script>
Given the following scenario, how can I use React/Preact components in my project:
The main/header content is generated using Django (or static html) templates
I want to use React to generate the sidebar and footer components, depending on the page it is sitting on.
I think the following would work, but I don't know how to split or load the bundles according along the following lines:
Load React/React-dom bundle on every page
Load page specific bundles on demand, where needed
How can I bundle single components up using webpack for use in static html pages and display them where needed? How do I configure webpack for that?
Essentially you transpile React from a bunch of JS/JSX files into one JS script (using Babel), which is then loaded in your html document. So it'd be something like this:
<html>
<head>
// Usual head section stuff
</head>
<body>
<div id="header">
This is the Django site header
</div>
<div id="sidebar_root" />
<div>
Blah blah all the site's body content from Django
</div>
<div id="footer_root" />
<script src="react_sidebar.js" />
<script src="react_footer.js" />
</body>
</html>
And you'd have you React components (which would have a bunch of sub-components), one of which is rendered into "react_sidebar.js" and the other into "react_footer.js". So those components would be in React and the others would be Django.
So in order to load React bundle scripts on demand, you just need to include the script and the div which acts as its root.
P.S.
If you were always loading the sidebar and footer together (i.e. never just one or the other bur always both) you could combine them React DOM rendering into one script, so you'd only have to include one script in your html