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.
Related
I have this project where I have to code a website and ios and android apps.
I have to do this with a very limited team (basically myself). So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
I have come to consider flutter : the logic (and interaction with the backend) in dart can be compiled to both ios and android, and to javascript for the web site to call. I also like how the UI is built using flutter.
For the web site, I know there is flutter web that can be used to do a web app, but I want my website to feel like a web site more than a single page app. I have thought about using React+Gatsby to do the website's ui, while calling the dart compiled js for the logic. That would enable high page loading speed, good seo, while keeping the interactivity of a react app and the single codebase logic through dart to js compilation.
I am wondering if this seems like a good approach to you, and if not, how you would do it.
In this approach, I am wondering if it would be possible to embedded flutter web widgets inside of react js components, always in a concern of maintaining as low platform specific code as possible. I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
Update
Flutter Web is now available in a stable version for production.
Below answer is relevant back to the time when question was asked.
Flutter Web not recommended
At the current date, I would recommend not to use Flutter Web for production as it's in Beta. The Flutter Team is still working on improving quality, performance and browser compatibility. You must be cautious about using it as you may run into bugs and some other complications.
Also, I believe that the community support for Flutter Web might be on a lower side as it's pretty new.
Limited browser support
Another factor which bugs me is that the Flutter web apps can run on limited browsers as of now which would affect the reach to your user base:
Chrome (mobile & desktop)
Safari (mobile & desktop)
Edge (mobile & desktop)
Firefox (desktop)
What would I prefer?
Well, although it might be a hassle to handle different codebases for mobile and web platforms, I would still prefer to stick with React JS as it's much stable with better browser & community support as opposed to Flutter Web.
Good luck with your app! :)
I am unaware of how to use Flutter widgets inside a React app. But to address your other concerns,
So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
Given no other restrictions, this leads to a single Flutter app for both web and native. For a team as small as three we still found it easier than having multiple projects.
The key factor in merging our initial projects to one was the notion of mobile browsers. In a mobile browser you website should reduce itself to the look of your mobile app, unless they have different purposes. And this automatically happens with Flutter projects if you derive your layout breakpoints from screen size. Otherwise you would code your same narrow design twice: in Flutter for native apps and in React for web.
Same goes for native apps for tablets in landscape mode. They call for a layout that resembles your desktop browser version, and you automatically get it with Flutter.
Also in web version you may have more tools than in a native app, just because your screen allows it. Naturally, you would code this logic in JS. But then you get an order to migrate this to native apps. Would you then replace your JS logic with Dart logic compiled to JS and embedded into frames? This is a messy road.
Lastly, think of Mac, Linux and Windows platforms that will come to Flutter soon. Should you ever need a desktop native app, you would want the same layout as with web.
I want my website to feel like a web site more than a single page app.
The difference in feeling between a website and a single page app lies mostly in state management and URL handling. You may do the following to reduce it:
Introduce URLs for your pages. By default, in Flutter every piece of action can happen under a single URL of example.com/#/. The window then feels fragile as there is no URL to copy and get back to. Flutter's Router API, released in Oct 2020, allows you to generate URLs on any change in your app's state and parse the state back from URL. If you do it right, then everything on your screen becomes a function of the URL, just like in traditional websites.
Use url_stragegy package for your URLs to be example.com/path rather than example.com/#/path which immediately feels fake.
I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
No, it does not. Mostly because you get too narrow a channel of communication of messages between JS windows. How would you listen to Flutter's BLoC's stream in another frame? It would take too much boilerplate code. Also I cannot think of easy debugging process.
To me, Flutter Web still has drawbacks:
It takes awhile to load.
Many specific JS APIs are not implemented yet.
Many services you integrate with may not have Dart SDK, while having JS SDK. For instance, I struggled to get Ably working.
No search engine optimization.
You cannot use em as a screen unit, so scaling elements may get tricky.
Still with limited resources a single codebase outweights everything else.
To be clear, my team has been working on a web+native project the whole 2021. It now has passed most of the testing, but not yet released. For a sense of scale, it is a marketplace of 40+ screens.
I need to develop a simple social networking website which will just act as a platform for different businesses to discover each other. Each Business man/Service provider will have his own profile that he can manage and these profiles will be characterised and sorted according to their types. Basically I would need a Home Page, Profile page for each profile, Search page along with registration and login. I don't need to make any messaging module.
So for this purpose I wanted to know if using Gatsbyjs is a good idea, also if not then what are the other frameworks that I can use for a easier and faster development.
One main problem with gatsby for this use case is: Once a new business signs in and wants to create and edit a new profile, this new profile is not part of the build process. Gatsby builds only the HTML pages you know in advance. Triggering a rebuild, which may take several minutes, everytime a business edits their page is not feasible. You would have to hack something together with client-side routes which is not the intended nor recommended way of doing things.
A server-side framework like Next.js is better suited for this task. This way you can dynamically add and change the profile pages.
I am new to PWA, i am curious to know that is it possible to create a PWA in angularjs?
please provide steps to make PWA using angularjs if it is possible to create PWA using angularjs.
There's nothing framework-specific about PWAs - your site just has to meet a certain set of criteria:
Everything is served over HTTPS
The design must be responsive
Your app must be available offline (i.e. it needs a Service Worker)
You need to provide a manifest file containing metadata about your application
Your app must work in all modern browsers
Page transitions shouldn't block the app (i.e. you need to show loading screens/spinners if things are taking a while to load)
Each page in the app needs a unique URL
All of that is achievable with Angular 1 - it'll probably be easier with a modern framework, but there's nothing stopping you sticking with what you've got, for now at least.
look at this github project https://github.com/addyosmani/angular1-dribbble-pwa
I have a create-react-app website, it has multiple pages using react router. I discovered recently I can host my site using Azure Storage Account rather than a web app which is pretty cool.
The main content of this website is a list of games which when clicked opens a list of characters per game. Each game has a path, my intention is to stick each of these game paths on a seperate custom domain to give the appearance that they are each their own site.
I am attempting to do this using azure cdn, and ive recently discovered that i can use Azure CDN to create endpoints and allocate them each a custom domain.
So I have a CDN Profile with Verizon Premium
I have a primary endpoint called [website-name]-cdn, it uses the base hostname with no origin path. Loads the base website as expected.
I have another endpoint called [website-name]-dota-2, it has the origin path for the game dota 2. Loads the base website instead of the page for dota 2, I need this to go straight to the dota 2 page.
Here is my url rewrite rule.
I want to be able to set up an endpoint for each individual game, but i just cant seem to configure things properly to get the urls to load correctly.
Everytime I change the rule I have to wait 4 hours so progress is slow.
Any help is much appreciated :)
Hopefully this is better layed out that my last attempt.
Figured this one out.
In short, the answer is that this cannot be easily accomplished the way I was going about it. However changing things wasn't as bad as I thought it would be.
The best way to accomplish this is to change the site to have multiple entry points, this cannot be accomplished out of the box with CRA so you need to use something like this. With my multi-entry point react site I change the react-router routes based on the entry point of the site.
Once this is done you can deploy the site to multiple storage containers, and then in each one specify a different entry point.
I have really big concern on my web project architecture which will have separate mobile and desktop web app.
I already finished to develop web version based on "create-react-app" project template and for mobile version, I want to reuse my exists web version component as much as possible.
We will serve these with separate url "www" for desktop and "m" for mobile.
I am thinking of two possible ways.
Just build another create-react-app project for mobile and share the common code.
In exists web client create-react-app project src folder, make mobile version codes like component.js component.web.js component.mobile.js. But in this case I am worrying about the size of bundle js file.
I also thought about the responsive web design, but we have totally different layout and components.
Rendering two different layout within a component by the size of viewport or url(www/m) might be another possible way but it is highly possible for me to use server-side-rendering...
What would be the good approach to solve this problem....
I would approach this as follows:-
Move all business logic to a common package and use it in both mobile and web. This would make your logic common.
Move all the common components/config/colors etc. to a common package and use them in both the apps.
Handle view part for both the apps separately.
I also thought about the responsive web design, but we have totally
different layout and components.
If you have totally different layout and components I would suggest to keep mobile and web segregated. Its not only about the bundle size, you can get around it by lazy loading, but your code complexity can increase.
You can use the same code and build mobile application using Cordova Framework
as your web code will be the one to generate application.
As well you can create for multiple platforms.
Go through official website.
https://cordova.apache.org/docs/en/latest/guide/cli/index.html