I need to develop some basic components to add them to an existing webpage. I want to start with the default create-react-app. In the end, I will end up with src/FirstComponent.js and src/SecondComponent.js
I need to build both components individually. When I run yarn build i get a main.hash.chunk.js that hash the two components merged. Is there anyway to end up with two different main files? Is that a bad approach?
If I need to use a third party library, lets say axios, and I will need them on both components... Will it be imported twice?
Any advice would be appreciated!
If I need to use a third party library, lets say axios, and I will
need them on both components... Will it be imported twice?
If the existing webpage you would like to plug these two new components into is a ReactJS app then you might want to consider making these two components presentational components (for more info). The axios request will happen in the existing web page and the data that each component needs will be available to them via props. I hope that helps somehow.
Related
I don't know which is best option to share component ReactJs in my particular case, I have two application in NextJs, one is e-commerce and another is a manager portal for this e-commerce.
In first app (e-commerce) I have UI Components (buttons, fields, headings, texts, etc), and I want to use these components in the other project, I been thinkings uncouple UI Components and create a new repo, and this repo sharing to both project.
I don't know if this is right thing to do that?
Can I create this repo (UI) in NextJs for use benefits of them? with NextJs is very easy to use Typescript, EsLint, also NextJs include base template PostCSS, and with nextjs almost hardly need config anything.
What do you recommend?
Can I use Next Js only to create repository of components? is recommend?
You need to create a component library.
Component library using bit
Create react library
Here's an article with your question as the header: https://blog.bitsrc.io/how-to-share-react-components-between-nextjs-projects-c0857bbc1fcb
I have a working NUXT application with various pages and components in universal mode. Now I need to render one of the components on another static html site.
I can easily export a regular Vue application's component just adding a bundle script and div element to which the components renders.
But how can I do it with NUXT?
Nuxt is not really meant for a quick plug (with a script tag) but for an SSR usage (with some NodeJS build), so I highly doubt that you can make this. Or at least, I don't really see the point if you only use it as an SPA component.
If somebody knows a solution to make it work, I'm all yours on your opinion on this.
I have a backend rendered page (django in case it matters) which I want to soup up a little using some components from PrimeVue and a markdown editor packaged as a vue component. Right now, we have a few small animations using jquery for which we include jquery from a CDN directly into our pages. A few months ago, we needed to spice up a page using some more client side interactivity and we included vue.js via a CDN onto that page (dropping jquery) and then wrote some javascript in an index.js that we also loaded up from a CDN and got our work done. This is the current state of affairs. The page currently looks like this
<html>
....
<script src="https://cdn/vue.js"></script>
<script src="/static/index.js"></script>
The div #mainvue is where vue runs and does what it needs to.
This is where we are now.
Using plain vue is okay. Now, I'd like to throw in a few components from primevue as well as a 3rd party markdown editor that's wrapped as vue component. I want to bundle all of these as wel as plain vue itself into a single javascript bundle that I can throw onto a CDN and include into all my pages. Then my devs can do their day to day work in the index.js.
Is this a reasonable approach and if so, how do I do it? I'm not familiar with the javascript ecosystem. If not, what's the right way to solve this problem. I don't want to go all the way SPA and REST API. I just want to use a few 3rd party components and vue on a simple otherwise backend rendered page.
Since you mention you don't want to "go all the way SPA," a reasonable hybrid to is to use Vue in MPA (multi-page app) mode. This will require using a vue-cli/webpack configuration to compile your Vue components into bundles, but once you have this build pipeline, these bundles can used in individual Django templates via django-webpack-loader. Information can be passed from Django via template variables directly as Vue component properties.
Re bundling, yes you can bundle all these resources into a single JS using this method, but it's nearly as easy (and far more performant) to create one or more common bundles that represent shared logic (third party libs, invidual components, even Vue itself) and then pick and choose from among these bundles as needed on individual Django templates.
The steps to implement are a bit too involved to post directly here, but I've written a series of articles Django + Vue -- Best of Both Frontends that explains. There's also a cookiecutter for boostrapping new projects using this method. I realize you already have a site, but you can perhaps adapt the implementation there.
Good hacking!
I am trying to develop multiple Vue.js components written as .vue single file components. The requirements is that such components need to be embedded by front-end designers directly into HTML using element.
Since i cannot achieve this with default compilation method provided by webpack, i figured out it could be done by compiling (more correctly, transpiling) as web components.
Is it possible to use Vue Web Components with listeners as you would with regular Vue Components?
<some-web-component #some-event="someFunction()"></some-web-component>
I couldn't find any examples of this, all which i found had only a simple component with some props, displaying a message. Is this even possible?
If not, is there some other way to achieve communication between Web Components?
Similarly asked here:
https://forum.vuejs.org/t/using-vue-single-page-components-directly-in-html/66384
For anyone wondering the same, I've found the solution to be using Vuex store.
I am developing an involved web app with asp.net core.
I am developing React components, writing all of my components with ES and JSX syntax.
I run webpack to transpile all of my code (so now I have pre-transpiled files ready to be served)
When a request comes in, I just serve my pre-transpiled bundles.
I wanted to have a way of only bundling and sending user-specific components (based on a list of features they have access to) to the client.
The only way I could figure doing this is to do "on-the-fly permission-controlled component bundling combined with on-the-fly jsx compilation" to serve my components.
I gather that webpack shouldn't be used as an on-the-fly bundler like this, so that is out of the picture...
Partial scrappy solution I came up with:
Using no importing or export mechanism in my js, I use Razor to cycle through my feature list, adding the appropriate (mostly modular) components in what I call "Dependency First Order" to the page, and at the end of each components' code, I write
class ComponentA extends React.Component { //Component Code Here }
window.ComponentA = ComponentA;
So all components are global and can be rendered.
This way, I am able to select what Components get sent to the client with Razor.
NOW, remember when I said "mostly modular"? Well if I am rendering a component within another component that the user doesn't have access to, this partial solution would leave the render statement embedded in main component that is rendering the sub-component itself, without the component code it's supposed to render actually being there. This being a dirty partial solution, I would just suppress the error if the component was non-existent and move on.
Bottom line is I am having a real difficult time making my react components 100% modular and being able to control the granularity of my 'component dependencies' so that no code is on the client that a user shouldn't have access to.
Ridiculous solution someone offered me:
It is also certainly out of the question that I would generate a set of bundles for every user and whenever an admin changes what a user has access to, I would re-render that bundle with webpack. (especially since I am dealing with thousands of users here).
As I am writing all of this, the more and more I feel like I am just being a perfectionist and should just go with the above paragraph.
The solution I should probably go with:
There is the ideology out there to just send all of your js to the browser and then selectively render them based on the permission of the user. Any security loopholes here would just be handled by server-side access control to lock down endpoints if a specific user did try to forge requests to parts of the application they don't have access to (which would be implemented regardless).
I am under the gun here and feel like I am overthinking most of this. I would be greatly appreciative of any feedback. Thank you.
It is possible to ship permission based JS bundle to client. You can leverage webpack dynamic import logic to load only required features JS bundles.
You need to create directory structure based on features and load them based on user permissions. Basically what webpack does is, it creates separate bundle for each feature and load it via dynamic import when requested.
Solution here 👇
Note: You might not see lazy bundles in codesandbox.io network panel, but, you can download project and run server locally to see bundles being lazy loaded.