I am new to React Native I want to know how is it possible to deploy react native part or code like javascript files and assets on server and then use it.
Currently it is showing as localhost
Please let me know how to deploy it on server also is it possible or not.
Do I need to update app on play store every time when I change something in react part of my code?
what exactly code push does and is there any way by which I can load my react native bundle from server and update app dynamically
React-native compiles down to the two native languages.
Effectively you have 2 applications, non of them web.
You could have an image assets remote on a server and use the URL in the react-native code combined with a cache (so you don't have to download the asset every time).
Considering JavaScript files, I would say no. Unless you create an server and request the functionality by API calls.
And no, you don't have to interact with the play store every time, but usually you do :)
I think you need to understand how React Native works in order to understand.
What RN actually does is to expose native API to your Javascript code base. Basically a RN App is composed by 2 things:
As you can immagine the Native part is everything that is written in Swift/ Objective-C/ Java and that is the part you can not update without going through the App stores.
Now the interesting thing is the JS part, remember we said that basically you are consuming native API with JS. If you notice when you run react-native run-ios or react-native run-android a server is instanced which serves a bundle to your emulator / physical device.
Now if you think about it basically when you open the App the bundle is downloaded an then run. When you update your codebase while the app is running on the emulator the servers sends a signal trough the socket to notify the client that an update is available. At that point the client downloads the bundle and the app is reloaded.
Now to answer your question, yes you can serve the JS Bundle on your server and make the app check when is loaded or resumed if a new version of the JS Bundle is available, if so to download it (OTA update). As you can understand only the Javascript part can be update in this way and not the native part as well.
Then again, there are a few services that already do this like codepush by MS.
You can use the code-push cli or appcenter cli to publish your Javascript code to the cloud servers (hosted by Microsoft), and use react-native-code-push to retrieve the updates in your RN app.
Alternatively, you can use Expo which comes with its own over-the-air (OTA) update functionalities.
Both of the above services manage their servers internally for you and do not allow you to host the JS bundle on your own server (though there's a feature request for it).
Note that only changes to the Javascript codebase can be delivered OTA. Any updates to native code (eg. Swift/Java) must still be delivered through App Store/Google Play.
Related
I have a react-js app and I use capacitor to leverage with native mobile API's (eg: BLE). My objective is to live update the app upon a minor change (eg: adding a new label) without going through the whole appstore submission process. I know Ionic has AppFlow that could work well with Capacitor, but it is way too expensive for me. Thus, I saw some are suggesting writing a script that pulls in the JS perfectly from somewhere like the S3 bucket, and when you build the app you build in all of the native code and replace the HTML scripts with one that comes from a remote source (But I have no idea how to do it)
Is this how most people handle live-updating webview apps or is there a better way ?
If so what are the steps to achieve this objective using scripts and so on (with code examples)?
Hey I'm the Maker of Capacitor-updater, the only alternative to ionic AppFlow.
The updater allows you to manage update by yourself, store your zip update where you want and use the download method.
How to start
npm install #capgo/capacitor-updater
npx cap sync
Then in your main JS, this is required to let the updater know the update is valid
import { CapacitorUpdater } from '#capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()
And lately after checking yourself the current version need update:
const version = await CapacitorUpdater.download({
url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
})
await CapacitorUpdater.set(version); // sets the new version, and reloads the app
After many request of people didn't want to do that themselves, I started Capgo a business to manage all the update process for you.
All is open source and can be replicate on your own as well.
Doing things for Capacitor is now my main activity, I produce open-source plugin as my main channel of Marketing, I'm solo founder and bootstrapped.
Hope my tool will help you !
You need a subscription to Ionic's AppFlow, as of yet ionic is the only company that offers live updates.
I have a website in GatsbyJS that has huge datasets of dynamic data fetched on load of a page via React fetch. The data displayed needs to be semi live (e.g. be refreshed every 5 minutes).
I am wondering how do I achieve SSR speeds with this, because dynamic fetch doesn't cut it. Is it cron scheduled rebuild and if so what happens during the replace of the build folder?
You can use a service like Netlify. They provide a WebHook URL that triggers a build upon querying. You could then have a cron, every 5 minutes, hitting this URL to trigger a rebuild. Netlify handles the build for you, only replacing your site if the build succeeded.
If you want to do it yourself, you can maybe use Caddy - a webserver that has a plugin for deploying from git, similar to how Netlify works (only update site if build succeeds). Note: this is not yet supported by Caddy 2 (current version).
Another option is PM2, which also builds your site for your, handling failures gracefully (your site is always up, only replaced when the build succeeds).
I think a cron scheduled rebuild is probably your best bet. You may want to check out Gatsby cloud. They have recently added incremental builds, which means that only certain pages get rebuilt. If only a subset of your pages need to be rebuilt that could significantly speed things up. I think what happens during the replace of the build folder depends on where you host your site. Some hosting services like Netlify will probably use some sort of a URL swap to instantaneously replace your old deployment with the new one. If you host it on a regular VPS there will probably be some inconsistencies as the files are copied over/regenerated. Aside from the newly added incremental build feature I think what you're looking for is precisely Gatsby's Achilles heel.
I understand that React is frontend, and NodeJS is the backend that allows Javascript code to function outside of a browser. What I don't understand (and this is after following tutorials online on setting up a React project and a NodeJS project) is why I have to create an instance of each.
For example, in my React project, I managed to create a website. But because I needed a backend, I decided to use NodeJS. But I'm doing NodeJS tutorials, and I can create a website using NodeJS too. I'm confused because right now, it's appearing to be that React and NodeJS do the SAME THING.
I have never worked with NodeJS before so I am a bit confused. I was under the impression that I would just use NodeJS to host the backend, but after seeing that I'm literally having to create an entire website with NodeJS, I don't understand how I'm supposed to use React and NodeJS together.
How do the two, React and NodeJS, integrate together to create a fully-functioning web app? I have yet to see something online that clearly breaks down how the two interact.
React is front-end library. It provides great tooling for creatiing user interfaces. And it creates a single page application. Which means when you open a react app. It does not reload and its really fast.
While you could also use nodejs and something like handlebars to create a website. But that website would be rendered on server and then served to the user. But its alot more than that. There are a lot of things that you want to do on the server. Like authentication. You want that part to be secure. So you keep it on the server.
Now the answer to the final part of your question.
For a fully functional app. You would use react to create user interfaces. And nodejs for creating an API which your react app will call.
NodeJS is not just regular javascript, it is a javascript runtime that sits on top of a C++ engine called V8, provided by Google. Node executes outside the browser, whereas React / Vue / Angular / etc are in-browser javascript frameworks.
React is a whole separate animal; it is a framework that renders its own DOM in the browser. It is a javascript engine that is configured to optimize DOM manipulation.
While the development pattern of frontend and backend appear similar, they are doing different things. React is handling component lifecycles, applying dynamic style rules, processing in-browser data, and making API calls. Node is handling requests from the browser, coordinating access to the server's file system, managing network I-O, performing cryptographic evaluation, etc. Because of these different responsibilities, Node makes use of different dependencies (read: node modules) than a frontend framework.
Ultimately, Node and React communicate through HTTP calls (or, less frequently, through a WebSocket or SOAP protocol).
It would behoove you to read about how node works under the hood.
NodeJS is just a runtime that allows you to run javascript code outside of the browser.
In order to compile and transpile the react JS app, they use webpack and other tools which runs over NodeJS.
NodeJS will serve as your backend, whereas ReactJS will create the interface/UI where you can actually manipulate your server (nodeJS). So first you'll write your NodeJS server or API. You don't need to use ReactJS to create a frontend that would interact with your node server, like you said you can use NodeJS to create your views as well through a different library. ReactJS is just one choice of many for the front end of your NodeJS app.
The point is that react and any other SPA library is working on a client-side (browser).
React fetch and consume the data from the server API.
You don't need to use Node.js for building API. You can use various frameworks based on the technology you prefer.
If you are not familiar with the Back End, you can use https://www.npmjs.com/package/http-server to have a fake API service and can build the Front End part with it.
NodeJS is a javascript framework that allows you to create a server to serve up websites using Express or the built in libraries. It also is capable of building a website with just NodeJS.
You can take advantage of the ability to do server side rendering with a NodeJS server.
https://reactjs.org/docs/react-dom-server.html
There is a ReactJS framework called NextJS tha has server side rendering of ReactJS component.
https://nextjs.org/#features
You could potentially have some areas of your website that are built solely with NodeJS and other pages that use ReactJS and a NodeJS backend. But it is cleaner to use ReactJS for the front-end and NodeJS for the backend.
I need to set up automatic remote updates for my app built on nodeJS (not the nodeJS itself).
In my specific case I can't distribute my app as SaaS, so I have to share a copy of app with each client.
I've checked related topics here, but haven't found helpful ones.
Here are a few related questions: one, two
I don't know how to set it up, but I have a few ideas:
old-school way (?) :
use unix cron + shell (or php) script to make «check-request» to «update-server»,
stop nodeJS instance,
replace files with newest ones from tarball,
run nodeJS instance with my app : from shell(?)
It may work if I use my own server, but how can I do the same on, for example, Heroku ?
Overall, it seems weird a bit.
two nodeJS instances way (?) :
use unix cron + another nodeJS app which checks updates on update-server,
then stop one node instance from another && update files
start one nodeJS instance with my app from another : how???
— Is here something else?
— How do folks solve that problem?
— How to realize, for instance, functionality like «Update manager» in Wordpress for nodeJS based app?
What you're talking about is CI (continuous integration), there are many tools that can help you in the process but they essentially do the same thing.
Detect a change in the code
Pull changes
Build the project
Run tests if there are any
Deploy to the server
— How do folks solve that problem?
Folks use Jenkins, bamboo and many other auto deployment systems.
If you're using node with pm2 you can use kinematic that has that build in (one-click deployment feature)
I would like to use angular.js for my Image Editing Tool in my website. Do I need node.js also?
I don't understand the scenario. If I don't need it, then when do we use both nodejs and angularjs together?
I feel your pain.
For someone new to Angular 2 development, I can feel the pain of having to learn server side technologies for something that is essentially a client side technology. From what I understand:
node.js is only used to manage the dependencies of an angular 2 application. If you can somehow manage to get those dependencies without using node.js, npm or jspm then you can run and develop your application offline. However, doing it manually will take an inexorable amount of time since you have to download files manually which may have other dependencies which will require other files to be downloaded again (yes I've been there). node.js or npm or jspm for that matter automates this process as well as taking all the necessary steps of configuring the files (jspm) so that whenever you use a particular dependency in your application, that particular dependency's other dependency will also be present in your system.
Some browsers, particularly Google Chrome restricts files loaded locally for security purposes so that certain HTML 5 technologies used by Angular 2 will produce an error when loaded using the file: protocol. So you need a server from which you can serve your application so that all the available HTML 5 technologies is available for Angular 2 to run.
node.js is also needed for the hot-module-reload capability for rapid application development since it provides a file watcher api to detect changes to source code.
But there is a way to develop Angular 2 application offline without node.js.
Remember when I said that if you can manage to get all the required dependencies, you can run and develop your application offline? If you can somehow find or create a package that has all the required dependencies your application will need, then you do not need npm or jspm to manage the dependencies for you.
For the file-access-restriction problem, you can load your project as an extension. Extensions have the ability to use all the available HTML 5 technologies as well as some powerful api's (not available even to applications served on a server), while at the same time being local to your development environment. So you do not need to fire a web server to access HTML 5 technologies if you serve your application as an extension.
For the hot-module-reload capability, you can approach it from the other way. Instead of having a file watcher in the web server to monitor changes to files in the local system, you can do it from the application itself. Since the application can fetch or xmlhttprequest resources that are needed by the application, you can periodically fetch or xmlhttprequest the resources your application needs and compare it to some cache. But how do you know which files to check? You can look for links within the page, script, of img. If you use SystemJS as the module loader, then you can use its registry to look for the files needed by your application but not loaded in the page, since it has been transpiled or something. While doing all this can be a performance drain to your system along with the added overhead of transpiling or preprocessing non-native code, this job can be outsourced to a web worker which will free up the main execution thread in the system for your application code.
Don't believe me? Here's proof.
The Angular in Chrome project on github contains a zipped package which contains the required dependencies needed to develop a minimal Angular 2 application (by minimal, I am referring to the Tour of Heroes tutorial referred on the quickstart page). So that if you are on a system not supported by node.js (yes there are, ChromeOS for instance) or just on a restricted system in which node.js just isn't available, all the required dependencies are available and you do not need npm or jspm to manage the required dependencies for you.
There is a proof of concept extension which serves the tour of heroes tutorial (the development files, typescript and all) locally as a chrome extension.
The extension also implements a hot-module-reload functionality by hooking into the hmr-primitives developed by alexis vincent for SystemJS. The hot-module-reload functionality is enabled by a single javascript file so that if this functionality is not needed or is taking up too much resources, then you can just remove the offending line of code.
But be warned though.
If you are using this system, then you need a way to update your development package as technology moves forward and it moves at a rapid pace (what with talk of Angular 3 when Angular 2 has just been released) or the technologies that you are using to develop your application may become obsolete or that somewhere along the line an api change may prevent your application from being functional in the future. You are also not guaranteed to have up-to-date repositories for the dependencies since these types of packages are maintained manually.
Bundling your application as a Chrome extension like in Angular in Chrome will introduce performance bottlenecks. Since code is transpiled and modules are lazy loaded, you lose the advances of JIT compilation and other performance enhancements that modern javascript engines use to optimize code run on the browser. However, what you lose in performance, you gain the flexibility to use the technology that you prefer to develop in. There is always a tradeoff. Moreover, the performance hit is only at the beginning as code is loaded. Once it has been loaded by the application, then the system will know how to implement the performance enhancements. When you distribute your application, you really need to compile the needed resources to take advantage of the performance enhancements of modern javascript engines.
The hot-module-reload capability is currently a hackish way of implementing a file watcher which uses common conventions for a project (temp1.ts, temp1.css, temp1.htm) since there is no way (I might be wrong on this) to get a definitive list of all the resources needed by the application but not loaded on the main page (the transpiled or pre-processed resources).
You don't need NodeJS for creating a client side image editing tool.
AngularJS is a web application framework, maintained by Google and the community, that assists with creating single-page applications, which consist of one HTML page with CSS and JavaScript on the client side.
But if someday you will want to upload and store those images on a server and make them accessible by multiple clients - then yes you will also need a server. This server could be made with NodeJS.
node.js is used to write Javascript on the server side.
angular.js is a client side framework.
You don't need node.js to use angular.js but, you can install npm (node package manager) to use some awesome tools that will make your life as an angular developer much easier.
For example: yoeman which is a great scaffolding tool.
There are many other tools available on npm here is a link to their site
Learn more about angular at the official angular website or at the angular youtube channel
No. Angular is used at the client side and Node for the server side.
They use to go together as the MEAN Stack but it's not necessary.
You don't need Node.JS for AngularJS to work. NodeJS is server side, AngularJS is client side.
If you are new to AngularJS, I'd suggest this tutorial AngularJS tutorial.
In the tutorial you will use NodeJS, you will understand why the two work together, but are not necessary.
It's hard to answer without knowing how your Imaging editing tool works. But to answer your question, no you do not need Node.js to use AngularJS.
Angular is a front-end javascript framework which operates in the clients web browser.
Node is a service which can execute javascript and is often used on a server maybe in replacement of PHP (like in MEAN stack).
Also, because Node is a service which can execute javascript it can be used in your local computer when developing Angular applications to do background tasks such as minifying css and javascript and performing tests.
So if your Imaging editing tool is developed in javascript and your application used Angular and Node (as a web server), the code could be executed on either client side or server side.
Have a read on MEAN stack to see where Node and Angular fit in. You don't even need Node at all but it's nice to develop all in the same language.
Reason for installing NodeJs
As a web browser such as Chrome, Firefox etc. understands only JavaScript, we have to transpile our Typescript to JavaScript. Therefore, the Typescript transpiler requires Node.js for generating the Typescript code to JavaScript.