I’m currently trying to build the structure of a react app that I’m working on, i have a home page that any one can see, and a dashboard only users with a specific role can view.
I’m using webpack.
How can i put the project structure to separate different pages and split the application so that it loads only the parts the user need ?
Thanks.
Webpack supports multiple entry points:
https://webpack.js.org/concepts/entry-points/#multi-page-application
You can define them like this:
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
Related
As part of optimizations of my e-commerce app, I want to improve the performance score in Pagespeed.
My idea is that I can render the hero component of my React.js application with Next.js (serve it with ready data from server), that way the page will loads initially with all the necessary elements.
The expected result is to enter the app than request the hero component and then I will have it in one file all ready without any loading time.
The general idea looks like that:
// My React.js app (app.js file):
const App = () => {
...
return (
<Hero /> // <----- My hero page from my react.js app but served with next.js
... // another pages from my regular react.js application
)
}
My questions is:
This is good idea in order to make my application load faster?
there is something that can lead to troubles combining both of those technologies together?
How can I configure them to work together? (I'm working with webpack without create-react-app). I want to serve the app exactly like today with single entry point and single script (webpack serve ......)
Additional information:
versions:
"typescript": "4.7.4",
"webpack": "5.73.0",
"react": "18.2.0",
I've got a (small) React app (vanilla create-react-app), that I would like to appear in a modal (bootstrap or similar) on another site. Is there a library that will simplify this process?
Specifically, the entire use case is that if my Javascript file is loaded (and just one javascript file), it will insert a "Click Me" type call to action, and when clicked my App component will be loaded into a new modal. It will need the CSS (for the app) to be included in some form as well.
I think all of this (excluding the call-to-action which is fairly simple) could be done during Babel/Webpack transpilation but I can't find anything off-the-shelf that seems to do this.
This functionality is built into ReactDOM.render. Simply add an id to your element.
For example:
<!-- index.html -->
<script src="url/to/react/build/asset" as="script" />
<div id="button-and-modal"></div>
Then to render your react app inside the div:
// index.js
import { render } from 'react-dom';
import App from './App'
function renderReact() {
const element = document.getElementById('button-and-modal');
render(<App/>, element)
}
document.addEventListener('DOMContentLoaded', renderReact);
Then your react app would look something like this:
const App = () => (
<div>
<Button/>
<Modal/>
</div>
)
You can also code the button and modal outside of the react app and only have the modal content rendered by react. If you want to do that, then follow the same directions but add the javascript for the button+modal inside the renderReact function.
You can use for example https://direflow.io/ to build your react app as a web component that you can render anywhere on any site.
Using your current project you can do
direflow create
cd <project-name>
npm install
and then
copy your whole app in folder into direflow-components so your project tree would look like:
/public
/src
/direflow-components
/<project-name>
// leave here only index.ts from example and copy all your project files here
index.ts
component-exports.ts
index.ts
react-app-env.d.ts
.eslintrc
...
If needed you can change
...
component: App,
configuration: {
tagname: 'example-component',
},
...
to your component that you want to render and tagname by which app will be accessible.
After all that you just do
npm run build
copy direflowBundle.js from build folder to your website
and render your app on some website like so:
<body>
<script src="./direflowBundle.js"></script>
<awesome-component></awesome-component>
</body>
I feel like I deal with this issue at every Front End job. It's definitely not easy, but I've found a number of ways to do it. I've tried the bundling idea you suggested but that one gave me the hardest time. The easiest way imo without a lot of hassle is to host your react app on a blank web page, then load it into an iframe where you need it.
At my last job, we wanted to migrate our shopify website to react, but with the way the shopify architecture was set up at the time, it made it difficult to us host a server-side rendered react app. So we built the web pages using Next.js and then deployed it to Vercel. We then inserted this as an iframe into the shopify website. It worked beautifully.
I am re-building our website as a single page React application, but for simplicity would like to keep the landing page the same. The landing page is a large static HTML file (with some JS for animations, bootstrap, etc). A large amount of imports and animations makes it difficult to migrate the entire page as a react component.
I want to add the website under /public/landing-page.html, with all of the extra CSS/JS/assets in the same location. Is there a way to assign a route to serve this page rather than render a route in the usual React way?
This seems like a common problem for people migrating their sites from JS/HTML to React.
You can serve this landing-page.html and corresponding CSS/JavaScript/Asset files as static resources. That is, make Node.js as plain web server for these files, without any connection to React.
For example, if Express framework is used in Node.js, it is pretty easy to make the configuration:
const express = require('express');
const app = express();
...
app.use(express.static(path.join(__dirname, 'public'), { 'extensions': ['html', 'js', 'css', 'png'], 'maxAge': '7d' }));
Then, you can open http://<your-website>/landing-page.html, without any React stuff.
If you want to achieve this within the react structure without using the node server, you should try using
<div __dangerouslySetInnerHTML={{__html: yourSiteAsAString }} />
if you want a safer approach, try using sanitize a node module which sanitizes the html before passing it to __dangerouslySetInnerHTML
The image object is not working.
I have tried importing the image and putting it in with JSX and also using the relative path.
const TeacherList = [
{
name: "PowerPumpsandMoves",
img_src: "../PPMfinalmockup.png",
id: "teach-4",
live: "",
used: "JavaScript,Html5,BootStrap-4"
}
I would like this image to show up.
Hi there assuming you are using Create React App or a similar tool, you have to explicitly import all resources at app startup. Meaning they sadly can't just exist as paths in your array.
Resolving specific relative path problems will depend on your development environment and the settings of whichever development server you use like webpack-dev-server.
If your array of images is coming from an API or some other dynamic data source, a better practice may be to host your images on a CDN and use absolute URL's in your data. AWS buckets and Cloudinary are great services to try for this.
However to quickly import a large amount of photos from a single directory if you are using webpack, you can check out this answer.
Dynamically import images from a directory using webpack
I'm trying to generate a settings page for my Ember-Cli app. The URL I would like is /settings/:id/ with separate routes such as /settings/:id/overview and /settings/:id/password.
How do I create nested routes using Ember CLI? I've found plenty of examples for Ember, but not for CLI.
UPDATE: As of v0.1.5, Ember-CLI has fixed the issue with not generating the routing map correctly. Running the commands below should now generate the correct code in router.js. It also added a path option for nested routes (rather than resources). You can see the changelog here. It looks as if the changelog notes are currently the only documentation of that feature, but they're easy enough to understand.
Right now, there is no way to fully generate nested routes or resources with Ember-CLI (as far as I can tell). You can have it generate the files for you, but you'll have to edit router.js yourself. For instance, if I run the following lines:
ember generate resource settings
ember generate route settings/overview
You'll get the following router.js:
Router.map(function() {
this.resource('settings', { path: 'settings/:settings_id' }, function() { });
this.route('settings/overview');
});
This is probably just a limitation in the way Blueprints currently works. Go ahead and generate your routes as you see above, then just modify router.js by hand to nest the route calls instead of making them top-level:
Router.map(function() {
this.resource('settings', { path: 'settings/:settings_id' }, function() {
this.route('overview');
});
});
Also, if you want to create a nested route, not a nested resource, I'm not sure there is a blueprint for that yet. I would just generate a resource and then change it to a route manually.