I am trying to create an android application using react native. In a general scenario, the MainActivity invokes the main component from index.js. We specify the main component to be registered in this index.js by importing any JS component form the file tree. The android application accesses the index file through a local port using http://localhost:8081/index.js
For my use-case, I want to host all the JS components on a remote server so that my android application fetches the main component from index.js on the remote server every time the app is initialized. This would enable me to make any changes to the functioning of the app on the server itself without having to roll out updates and user needing to download them.
I am still very new to react native and I do not have any code to post since I am still researching. I just have a sample application from which I cannot figure out how the android application knows to read index.js. I also cannot figure out how would I configure my application to hit the index.js file on my remote server URL.
If anyone knows how to do this or has some documentation references kindly help. I would imagine this is a very general use-case still I cannot find some solid instructions regarding this.
Use React Native with Expo. Your app will fetch JS bundles and assets over the air. See here: Configuring OTA in Expo.
Instant Updating: All Expo apps can be updated in seconds by just clicking Publish in Expo Dev Tools. You don't have to set anything up; it just works this way. If you aren't using Expo, you'd either use Microsoft Code Push or roll your own solution for this problem. Source
...but be aware of the downsides: Why not Expo?
Related
When Node js and react are used in a project at the same time, does server side rendering happen? I'm new to this. that is, pages such as (about, contact) are created with react and then the server is written by node js and when the request is received, pages such as about, contact are directed to the user, so this is the process when using react with node?
When Node js and react are used in a project at the same time, does server side rendering happen?
Maybe, but not necessarily.
If you have a React project with SSR then you almost certainly will be using Node.js (probably with the Next.js framework) to perform the SSR.
However, you could have an application without SRR that used Node.js at runtime (e.g. to provide a webservice) and any React application is likely to use Node.js at build-time (e.g. to run Babel and Webpack to prepare the application for deployment).
When Nodejs server and React are running at same time,
If there are 2 pages About.js and Contact.js
About page
About page is accessed through REACT-ROUTER-DOM and likewise Contact page is also through REACT-ROUTER-DOM.
About.js
React main page for routing and continuation part(react routing continuation)
THIS IS THE NODEJS SERVER BELOW
By getting
Nodejs generate about contact
Nodejs code link
So after that we will place this local application programming interface in react components by given below
react code link
So in this page I have used AXIOS to fetch the data from the application programming interface
NPM INSTALL AXIOS in react and it would be blocked by CORS Policy to avoid that we can install NPM INSTALL CORS and require it in NODEJS server.
Now I am running the server together and using react hooks I am able to get the data passed from application programming interface
About page and contact page.
I created an Angular 7 app and built it using Angular universal to make it SEO friendly. However, as I was reading, it is not possible to deploy it now on a shared server (once build with Angular universal, otherwise it is possible), since it requires Node.JS to run the script file on server.
My problem is that my hosting plan is on a shared server so I will not be able to run it using Node.JS but I still care of having my app SEO friendly.
What can be a good solution?
Angular Universal renders your application in server side before serving the page (SSR). Indeed you will need nodejs to make it work.
You need to prerender your application as static files.
With #ng-toolkit/universal installed you should be able to prerender your application with the command :
npm run build:prerender
Now, you should see new folder dist/static , inside which all your application views should be prerendered and can be served as static files.
In this tutorial on using String Data REST with React
it says to create an HTML file called index.html in the Spring Boot project and have a div where I can render the React component.
The problem I have is my React app is a completely different project. How do I do this or what else can I do to fix this? Thank you very much for the help!
You could do two things:
You could run them both in separate projects as you have it now and run them on different ports locally, however that means you need to enable cross-origin requests on your server or configure a proxy in the react project. (If you used create-react-app you can just add "proxy": "http://localhost:8080" in your package.json file where http://localhost:8080 is the url to your backend.).
You could move all the files into one project and have your React project run on the embedded Spring server. However this requires some re-configuration of your webpack.config.js and some restructuring of files.
I suggest the first option which is easier and also probably how you would like to run your application in the future, with one container for the client-side code and one container for your backend code.
Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?
The perfect case is to:
Use the default React Create App setup without ejecting scripts
Make AJAX calls to PHP files which will handle the queries to MySQL database
Questions:
Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?
EDIT: putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:
How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?
After investigation I have found a way to achieve my goal.
The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development
After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.
P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.
1) I strongly recommend you do try to do this :
Separation of concerns is very important. having two repositories for your application, one for the backend and one for the front end is very important. Especially if you are using a versioning system, and more importantly, if you plan on working on it in a team. I suggest you just have your wamp installation stay where it is, add a Vhost like : backend.my-project.com, and then run your react app normally, and use the env.local in cra file to store the URL of your backend app using the environment variables.
2) You do not need to eject scripts to have both your frontend and backend in the same place :
Either create-react-app inside your wamp folder, or point your wamp folder to your create-reac-app generated react app
The company I work for is currently experimenting with a newer version of their frontend. One piece of functionality is a self-contained React app that feeds off Rails APIs. We'd like to for one part of the app (the React part) use the react router instead of the rails router.
Is there any way for us to be able to embed the react app as its own section of the app whilst still maintaining sessions and being able to use the rails router for the rails components and the react router for the react components.
Yes this is a very common thing to do especially when migrating into more modern client heavy applications.
Like you said you will use rails to handle session management through cookies and routing will be the tricky part. You may however choose for rails to serve a single page and have react-router handle the rest. That is depending on things like auth see.
Once an html page has been rendered the javascript will load and react-router will handle the rest of the routing. This means that you will not be able to notify rails of client side route changes. It is difficult for me to address if that will be a problem without knowing more about your application design.
Also see this gem.
// Add react in existing app with yarn
yarn install
yarn add https://github.com/rails/webpacker.git
yarn add react
yarn add axios
resolved_paths: ['app/assets'] // Add it in webpacker to get access for assets file