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.
Related
I have started working on a project that needs a re-write. So, instead of doing a big bang release
we have decided to use Strangler Pattern which means the following
The current application (stack details below) will be running as is under the existing domain https://app.com
The existing (and new) features will be re-written in a new stack (details below) and deployed in parallel to the existing app (under the same domain https://app.com)
The requirements are
The end-user always works with the same domain https://app.com
Any existing feature migrated to a new app or a new feature is available by the under the same domain https://app.com
The stack and architecture of the current app is
HTML files with hardcoded data
CSS files
font files
PDFs
images
flash files
among other things.
Thee application is static. It has no database. It makes calls to other 3rd party APIs but does not have its own database (other than the files, and the images)
It sits under a directory and is served by running a web server (Apache) on a private dedicated server.
The stack and architecture of new re-write will
Use React or Gatsby
A standard build system that generates the static files
The data (PDF, Images) hosted somewhere else
Flash files (until we figure out a better way)
Given these requirements, I thought of having 2 versions of the app using some sort of load balancer such as Nginx and serve the URL patterns using a proxy.
For example
a request coming to https://app.com/productPage.html goes to existing app deployment (assuming it is not migrated)
a request coming to https://app.com/profilePage goes to existing app deployment (assuming it is migrated)
Now, considering this situation, I want to ask the following question
Is this approach looks sane? Are there better ways to deal with this situation?
How to implement such a reverse-proxy based system (considering Nginx)? (or if there is a better way)
I would love to hear out ideas and any resources/books/github that can help me learn and implement this.
Thanks a lot in advance!
I would recommend to create a v2 of pages that has been migrated to new functionality. And all links to the page should be updated to point to v2.
If anyone has done bookmark to old links, then those pages can simply redirect the user to the v2 ones by simply redirecting them using JS - window.location(url_of_target_page);
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.
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)
We use grunt build to build an angularJS application.
After the built application is published on the live server, how to let users know that there is a new version of the JS application available? Because their browser will still have the previous combined javascript file.
Also the backend, which is PHP (Symfony2) might change, so if user doesn't refresh the page, some API calls might not work. Keep in mind that the backend changes will be very rare. Versioning the API as v1, v2... might be a small solution, but in the long run everyone would end up using the newest API, so keeping the old versions is not required for longer period of time.
I was thinking to make use of Angular's $interval service and make a checker every minute to a simple web service, which would return the version number of the new application. If version is newer, angular should display a message and let user know to refresh the page or force refresh it. Is that a good solution?
Just try to add a unique version_id to the file itself using grunt.
src="name_of_your_file.js?v=INCREASING_VERSION_NUMBER"
e.g
src="name_of_your_file.js?v=2
I'm building a purely client side JavaScript based web app, and am looking to optimize the workflow for switching to CDN URLs for the JavaScript libraries I use on the production server.
In order to be able to do work offline, my laptop development machine loads all the libraries from a /js folder on a local web server. When I deploy the app, I want to substitute these URLs to use CDN versions of the jQuery library on Google e.g.. Since there's no server side logic, I can't make a check there for something like Rails.env.production? like I would if this were a Rails app.
I'm deploying by pushing to a git repo on the production machine and running a post-receive hook. I imagine I could run some kind of sed routine that switches URLs over the update in the same post-receive script, but am curious if there's not maybe a more elegant solution.
The easiest thing would be to simply put client side logic into the app to check what hostname it was called form, but I'd like to keep that as a last resort.
There is a previous discussion on fallback loading here, but a broader sense my question is about the automated swapping out of a block of text for another when deploying to a production machine.
You want to commit the change that has the pointer to the CDN version on the branch from which you will be publishing.
Commit the change that will have the development version to your development branch.
Assuming that this is the only way your branches differ, merge with "ours" strategy on both branches.
git merge -s ours mainbranch
This will ensure that you don't get that code change from now on wherever you merge or rebase.
hope this helps.
You could simply make the CDN host work locally by adding it to your /etc/hosts.
If that's not an option, use inline JavaScript to add the <script src="..." tags to the document and put some logic to decide whether to use CDN or not into that script.