Can react-admin be deployed as a static site? - react-admin

I wish to deploy a react-admin application as a static site - running without a server component. This data browsing app would use the ra-data-fakerest on a read-only slug of JSON.
Examples of deploying this would be to a GitHub Pages site, or a dumb memory stick.
Since react-admin is written in React/Typescript it must get trans-piled before running, presumably into a build folder. So, am I right in thinking I could just deploy the build folder?
(also grateful for any lessons-learned on this subject).

Yes, you absolutely can. The react-admin demo (https://marmelab.com/react-admin-demo/) is indeed a static site. What is deployed is just the built version of https://github.com/marmelab/react-admin/tree/master/examples/demo.
The react-admin codesandbox is another example of that: https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple

Related

Updating content in a static Nuxt website

I've built multiple sites with Nuxt SSR, but never touched the static part.
As far as I know, upon build-time, Nuxt automatically executes all API calls and caches them.
If I want to make a blog with a static Nuxt site, how would I update the content? Is it only possible when I rebuild the app?
Seems unnecessary to rebuild everything every time I add a new blog post. With SSR I just reload the page.
Also wanted to note that I have a Strapi.js backend running on a VPS and I usually make changes weekly. Nuxt's docs state that I need to push my changes to the main repo branch but there's no changes on the frontend.
Does this also mean that the headless cms should be local only?
The whole point of having a static build is to have all the generated files with no additional server Node.js server needed. It reduces heavily the costs, removes a point of failure, discard any notion of server charge (amount of users at the same time on your app) and probably some other advantages yeah.
Downside, you indeed need to actually yarn generate the whole app again if it's something that was added/changed in the codebase. Usually it's pretty fast and there are also incremental builds if I do remember properly (you will not regenerate all the 99 old blog posts but only the 100th, the new one).
Headless CMS like Strapi usually work with a webhook: you add a new CMS article or alike, Strapi will notify your JAMstack platform to rebuild your app. Even if no front-end code was changed, you can force to build it with the new data coming from the headless CMS' API.

Vue built a product to upload to the server

I'm building a web page for an event using bootstrap-vue (I started the projet with vue init bootstrap-vue/webpack my-project). I've used vue-build prod to compose and uploaded the whole folder to my server using filezilla. The problem is that the website is not fine, just a part of it is sawn.
Can you formulate the question differently? Its hard to find out what it is exactly you mean with
The problem is that the website is not fine, just a part of it is
sawn.
What does the console in your browser tell you? Vue has alot of debugging tools built in, so maybe you can post the console output, then we can tell a bit more..

Is it a bad idea to call phaser.min.js directly from GitHub?

As a jQuery user, I link the remote library from Google using
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
which is very clever because it's already loaded in the brower cache if the reader visited another site that did the same.
As I discover Phaser, I was hoping to see people on the web doing the same with
<script src="https://raw.githubusercontent.com/photonstorm/phaser/master/build/phaser.min.js"></script>
or any library hoster, but apparently no one does.
Is there a reason why Phaser users don't do that?
I would strongly advise against linking to the master release as it will absolutely break your games over time. Most of the 2.0.x updates have been non-API changing, but 2.1 and above will be altering some core aspects of Phaser. You should only ever link to specific versions.
For a similar service to the Google hosted APIs (of which they only host very specific libraries that they've selected) we use CDN.js, which offers the same thing. You can find details in the Phaser README or just go to http://cdnjs.com/ and search for Phaser.
There is as such no issue if you link to a specific version. But you don't want the latest build, as this can potentially break your site by making changes.
I don't know Github's policies on referencing their site like this.

How to recognize programmatically that application is installed vs development mode?

I'm trying to get information about license info of my app and MSDN docs (http://msdn.microsoft.com/en-us/library/windows/apps/hh694065.aspx) advice to use Windows.ApplicationModel.Store.CurrentAppSimulator class for that purposes during development/testing and when submitting app to store replace that class with Windows.ApplicationModel.Store.CurrentApp.
I wonder if there is any way to check in code (javascript in my case) if app is already installed from store so my code should use proper class and I won't have to remember every time I submit update of app to store to replacing those classes properly.
As far as I know, I could not find such thing. In fact, LicenseInfo is what provides information about the store listing.
I use a config.js file to keep settings at place which change between development and production. For example - if your app talks to a service, service URL also will likely change between development and production; the service might be running at localhost for development and for production in azure environment. I keep a bool in here and change by hand.
I have not automated it fully. but it is likely possible. need to dig through the msbuild logs for the build created for the store. if there is configuration setting found, then project can have two config.dev.js and config.release.js and msbuild need to conditionally pick the right file. I haven't looked into this yet.
I think I found at solution as described here WinJS are there #DEBUG or #RELEASE directives? . Not ideal, but works for me.

Storing files locally in Node Webkit App

Folks:
I'm creating an app using Node Webkit. The purpose of this app is to display images and pdfs. The app needs to download those files from a central repository, and cache them locally. When the app runs offline, the files should still be available, and displayed.
On the face of it, this sounds like appcache is the answer - and that indeed is where I was heading when this was a pure webapp in a browser. However, now I've discovered node-webkit, and here we are.
node-webkit's GitHub wiki states:
"However, application cache is designed for browser use, for apps using node-webkit, it's less useful than the other two method, read HTML5 Application Cache if you want to use it."
But doesn't say why.
I've also researched node.js filesystem - but that seems like a whole magnitude of complexity above what I need.
Can anyone point me in a sensible direction?
Thanks.
It has to do with the nature of App Cache itself.
You specify a manifest file that lists all the static assets required for your app to run offline. You don't have any programmatic access to the cache to add and remove files via JS.
So for a node-webkit app, it'd make more sense to fetch these files and store them in the Application Support folder (Or AppData, depending on the platform). That's where the node.js part is really useful, the file IO stuff.