I would like to work on a remote React component, which would later be linked in a different React Application. I would like to be able to import this component live in the application though so that I can work on the component and see it's live preview in a actual application ?
I was thinking aboout using federated modules but I would prefer a solution to work with Vite
Related
I have wrapped my JSX in the <Authenticator> tag and got authentication working with amplify. I took some time to create a theme to use, and customize my sign in page. What I would like to do now is make this reusable in other websites I create by making a node package.
I'm fairly new to React and Node, so forgive me if this is obvious. I was thinking I would need to somehow extend the Authenticator component, so I could just import my new component to any app and then wrap the app inside of it, but I am at a loss of how to do that or if I'm even on the right track.
{TLDR}
Could someone explain to me how I can go about packaging my customized amplify Authenicator for use in other apps?
I have created a simple billing web application using Node, Express, React and MongoDB
However i want to convert it into a Desktop application for local machines.
I know it is possible using electron, but i don't know how to do it.
Can anyone help me or provide with necessary resource?
you can use this boilerplate to get start a new project with react and electron.
Your build HTML file will act as the view file for your electron app.Which should be build by react-scripts.Use express server in separate file and use the server.
Handle requests just like you do in a MERN app.you only need to set the view to the bundled HTML file.
So I just started learning ReactJS and React Native.
I have some knowledge of MEN (Mongo, Express, Node). Up to this point, I learned how to res.render() files and pass objects in there.
Now what I need to do, is make MERN app. This app also needs to have Android and iOS version of it.
So far I learned that R stands for ReactJS, not react-native. Is there a way so it includes both? And where do I put react files when I have folder structure like from express-generator? Or is there a way they can be in completely different directories, and one calls the other via import?
It comes down to architecture I believe. The way I like to create the stack goes as follows.
You can create an API using Mongo/Express/Node that serves endpoints for your client app (created using reactjs, react-native and whatever other tech you want to include) to call using HTML requests. This would work for both mobile apps (using react-native) and desktop apps (using reactjs).
There's a couple different ways to deploy this. You can create 2 separate apps, a server app and a client app, which are both hosted individually by 2 separate hosts. This is useful because you decouple your front end code from your back end code. Also, you can have 2 separate directories for your code.
Another method of deployment would be to have your server serve your client files. This ones a little bit tricker, but you will be able to deploy your entire app inside 1 host so this option is also cheaper. I would suggest reading this article to figure out how to implement this and the file structure https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
I'm writing an application using NW.js and TypeScript. I would like to use one class per file.
To access node.js modules, I need to use require(). However, the document context within a require()d module is no longer the browser's document context.
It seems to me that I need to stick to namespaces to be able to access the browser DOM from my application.
How can I combine those two module styles in one TypeScript application? When trying to use namespace together with require, my types suddenly lose visibility across files (because the compiler goes into external module mode.)
It seems to me that I need to stick to namespaces to be able to access the browser DOM from my application
No. You can use a module loader like webpack to bundle the portions that the browser needs into a single bundle.js while still keeping all your code base in commonjs mode.
More
A quickstart is available : https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html
More More
I am actually creating an OSS editor that demonstrates this : http://alm.tools/. The whole project (backend + server) has a single tsconfig.json file.
I am having difficulty resolving the electron modules in my web application using Electron v0.32.3 using require. My understanding (although its not very clear in the docs) is that the modules are supposed to be automatically available to require of the application being run in the webview (examples include 'ipc' and 'remote'). I can see that they are there at runtime, but I am not sure how to access them:
I feel like there is some piece to this that I am missing. Other information: my web application is a Durandal 2x SPA that uses require to load modules already. Is there any other kind of setup that is required in the render process requirejs config to access these modules?
It turns out I just didn't understand all of the different processes going on. So with an application that is using a webview inside of a browser-window, there are actually three processes to be concerned about:
Main process - has access to node
Renderer process (browser window) - has access to node by default
Web view process - does not have access to node by default
I was seeing the node modules available to 2) and trying to use them in 3). The webview has the 'nodeintegration' attribute that can be used to enable this:
http://electron.atom.io/docs/v0.34.0/api/web-view-tag/#nodeintegration
However, using a preload script allows for exposing only the necessary node functionality with using nodeintegration:
http://electron.atom.io/docs/v0.34.0/api/web-view-tag/#preload
I went with that solution, setting up communication between the renderer process and the webview process.