Use case
I'm building an app that has support for translations. The way I imagined it is that the app will come with English by default and will be sent around to different places. When it arrives in Germany (for example) a user will add German as a translation and then send it to France. The French user will be able to see both the original language (engligh) and German.
Background
The app is a React web app wrapped in Electron.
For the use case I implemented the localStorage API to store content changes and switch between different translations.
Problems
After building the app as a portable exe and testing it I started noticing that the content doesn't carry over to a new PC.
It seems like the data is stored on the system or something else is happening (like localStorage gets wiped when moving the portable exe to another machine).
In my view, because I'm using localStorage and Electron bundles the Chromium browser with the web app I was expecting localStorage to be saved within the portable app.
Would love to hear your opinion on this
Thanks a million.
The localStorage is not saved to your app's binary files but rather to a file on your account's part of your PC's file system.
On Linux, for example, Electron creates a directory for your app in ~/.config and stores your localStorage data there. I imagine that you might find a directory for your application in %APPDATA% (C:\Users\YourUsername\AppData\Roaming\ or similar) on Windows.
What you could try is to write your data to a file in your app's resources bundle which would be preserved while re-distributing, but that's another question and answer.
Related
Requirement
I'm am looking to host a website which contains multiple html5 games.
Similar to the Poki Games, or any other web game platform.
What I understand
I went through their (Poki Games) website and I found that multiple html5 game icons are listed on the website in a grid. And on clicking any one of the game icons, the website starts loading that particular game from an external source inside an iframe.
What I Need answer on
I want to know how they are serving multiple html5 games from another domain. Since each of the games are loaded in a iFrame I'm aware that they all have their own index.html
How to achieve the same, what approaches should I take? So that if I do
<iframe src="//another.domain.com/randomHtml5Game_1"> // will load randomHtml5Game1 game
<iframe src="//another.domain.com/randomHtml5Game_2"> // will load randomHtml5Game2 game
My skillset
I am primarily a frontend developer have experience with hosting in heroku. Also have some experience with firebase. I'll be using React along with phaser for development.
From my understanding of your question, the answer is very simple.
Just use code splitting and different render enpoints.
We would have our home page with various links to other pages (Image grid). When we click a image it changes the route.
www.domain.com/game1
www.domain.com/game2
www.domain.com/game3
You will need to code split the routes using various different ways. You could use webpack, or NextJS (Easier framework), or if your just using create-react-app, just use suspend and lazyload.
On a particular route it will load your html and javascript and run the game.
I am going to guess this isnt the answer your looking for but its a start ?
Let me know your thought ?
Daniel
Firebase supports hosting multiple sites/domains using a single Project.
You could sepparate each game into a folder and host each of them separately and with a different domain.
You can find more about it here.
I use this for example when deploying Web Apps. One domain is the app like app.appname.com then another domain www.appname.com is the landing page and if the project as an REST API I host that under api.appname.com. In my case I just use different prefixes but the whole domain and url can be different.
The benefit is that if you use other Firebase features you can shared them between all those projects. For example the authentication or databases.
I am using create-react-app to create Single Page Websites (SPAs). I often have websites with a lot of images and content that require a minor textual change or a minor update. Is there anyway to make these without rebuilding the entire application? If I rebuild it all the image names and everything changes and the whole enchilada has to be uploaded and built for minor changes in content to the website. How can one approach this?I dont want to go back to building in PHP or another platform where individual pages can be tweaked and uploaded without having to upload everything every time there is a minor change. How are you approaching this in building react based websites?
Rebuilding a CRA should not take very long or cost much, you can use a Continuous Integration solution like Netlify to update your site programmatically based on the changes.
Or you can just build an API and write a modular site using the APIs. That is how most CMS work. You should try headless CMSs if you don't want to write all APIs yourself.
if you want to just develop frontend code and don't worry about images, videos, texts and so on you should really try and headless cms that will provide contents via API and a nice editorial console for your users.
There are a lot of them, and for sure you will find one that suits your needs.
I work in ContentChef ( full disclaimer here!!!) which also provides a nice SDK in js or typescript so you can easly get started.
If you want to give it a try: https://www.contentchef.io/developers/headless-cms-for-react
Is there a way to specify the default directory that the Ant Design Upload (https://ant.design/components/upload) component opens to? For example, if I want it to default open to some directory on a mapped drive like 'E:/dir/name', how would I do that? None of the options seem to fit that but there's got to be someone who has done this already.
Let me try to give some context, in an attempt to avoid the obvious vanilla web security responses: using react.js + antd with electron.js to build desktop apps out of the web tech stacks we all love. Using Node fs library to allow users to interact with the filesystem on their local machines. I would like to know whether it is possible to have it open to any directory I tell it to. I understand why this is terrible in the context of an app hosted on the good old intertron but this use case is much different as the user base is limited in scope and they actually want this behavior.
Actually that's impossible because of security reasons with HTML/Javascript. The ant design Upload component is not more than a simply styled HTML upload input
I would like to develop a Go application with a ReactJS "GUI".
My point is to launch a single binary "app" that launch a server at "localhost:someport" serving a ReactJS app.
I would like my actions in the ReactApp to be taken into account in the Go-side app.
I can do a Websocket-based ReactJS-Go application but I'd like everything to be bundled into a single binary.
I've followed this : https://medium.com/#esslamben/serving-static-sites-with-go-55bfc1ae4495.
This tutorial helped me to serve static files (a React App) with a single file.
But, I don't know how to continue to satisfy my wishes.
The thing I would like to achieve is the behavior like the old "RethinkDB".
When you run "rethinkdb.exe" in command line, it notifies a administration panel is running on 8080 port.
Navigating through localhost:8080 enables to administrate the database with a web-based GUI.
Does someone have advice to help me to obtain such a behavior?
You cant make binary for your React code , it should be copied
Your react built code (I assume static ) and put it in a specific path
Use Go http FileServer handler to serve the app as static one.
This might work or may not , I am not sure what are the bindings which is necessary should alos be copied. (your node modules and additional libraries you use it in your package.json)
Put your *.js binary data inside an HTTP handler to serve the client.
Store your js file as an []byte inside your application.
I'm working on a website made in react and all the changes I make in this site I always need to clean the AppData, does it always happen in React or do you have a way to bar it?
The browser may store cached files, cookies, as well as objects persisted with the Web Storage API within your AppData directory. You can clear this data by clearing your browsing data from within the browser.