How to add react app into openfin platform - reactjs

I'm finding the way to set up an exists react app(use create-react-app) into openfin platform(https://openfin.co/). Could you help share with me some repo, code sample or anyway to implement react app into openfin
Many thanks

The OpenFin API is injected in the global space so there's no need to import any libraries, just launch your app on OpenFin.
After using create-react-app you can launch your app with the openfin-cli
npm i -g openfin
openfin --launch --url http://localhost:3000
This will create an app.json targeting your app (the localhost version - eventually the URL field should be your production URL).
create-react-app bundles the entire build process into some preconfigured scripts so if you want to automate this launching as part of your local development cycle, you may have to eject the project. If you do that and want to use the launched provided by the CLI as a module, it is also available here, or using the V2 API you can launch an app as demonstrated here

Related

Do you need to re-build a ReactJS app if you want to configure for a different environment

We have an app that is deployed to an Azure Web App
It's a create-react-app project.
My question is, when wanting to configure for a particular environment eg. API URLs, do you need to replace the env file and run "yarn build" again?
I am noticing that certain fields such as process.env.REACT_APP_API_URL are getting baked when building so I am thinking that a re-build is needed when needing to re-configure.
Is there a better way to pull configuration in a react app that doesn't require a re-build?

How to link a local react library with a local react project during development?

I will start to develop a react that will be used by many internal react apps in my company. This library is starting from scratch, and there are many architectural decisions to be made about the components, utilities, REST client API, etc. To facilitate the development, the idea is to develop the library in parallel with the first react app.
For now, I created the library using create-react-library and deployed it in our internal Nexus 3 repository using npm publish. Also, I already created the react app using the create-react-app.
During the development, I will start to watch the react app, and I want that every modification made on the library or in the app should be synchronized in the react app server.
My question is: How I can link locally the react library and the react-project, in such a way that I only start the react-project (npm start)?
You can push your library to git or other VCS, and then using the get link, you can register this as a package in your main repo.
Once the library is stable enough, release a tag and update the package URL to the tag. You can even publish this repo to NPM and install like any public dependency.
Reason to go with this approach is that since both are in development phase, it would be easier for you to maintain link on git or other VCS.
As an alternate, you can even use npm link which can also be used, but per my understanding, maintaining over VCS is more reliable as you can have different tag/ version of same project, and this also facilitates you to have parallel development without too much overlap.
Reference
npm install private github repositories by dependency in package.json
npm link

How I can build react application to one bundle .js based on react-scripts library?

kindly we need to build my created app with static bundle how I can do it with the react-react-app template.
Best Regards
According to this it will be sufficient to run
npm run build
if you've created your react app using create-react-app.
I have not checked it.
A second way would be to use webpack as a third party tool.

React App Hosting - Host Prerequisites

Generic: What kind of services must a hosting vendor provide in order to make it possible to have a React app hosted?
More Specific: If I create a website with React and React Router, is it possible to deploy it by just uploading the bundled output folder? This could be for example a dist folder containing index.html, bundle.js and an images folder.
Could this be as simple as deploying a simple web page (like one built with plain HTML, CSS and JS)?
Sure just do: npm run build
and you will have a folder with the static files. Upload those with your choice of file transfer method and set the permissions to the web host appropriately.
100% Working Example.
React App Hosting in Firebase .
You can read this blog
Host Your React Web App in few minutes.
Command runnning in Wrong sequence =>
firebase login
firbase init
firebase deploy
npm run build
Command runnning in Correct sequence =>
firebase login
firbase init
npm run build
firebase deploy

How to deploy create react app on my website?

So I have a website and I want to deploy some of my projects on my portfolio website like mywebsite.com/first-project.html
I already ran npm run build so I have a build version with the static files and I put it on my website but the react index.html isn't return anything the div id of root is empty.
I have seen tutorial of deploying them through surge and github pages. I don't want to do that, I want it on my own website. How can I achieve this?
Edit:- I forgot to mention the projects I created are through the npm create-react-app method and I have run the static build through serve -s build on my local computer. I just want to do the same on my website.
Edit2:- In the future if I am creating a react based website with the intention of hosting on my own domain, what kind of groundwork should I lay to make it easier? Any node packages or routing or set up? Also would you recommend create-react-app for this purpose if not what method would you recommend?

Resources