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.
Related
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
I use digital ocean space and CDN to host a React SPA. When hitting with a browser the url [host]/index.html it works fine. However hitting [host]/index.html/customers/one or any other subpaths, returns a 404. Currently, any reload on any subpath returns that 404. Last, I use terraform to update the SPA artifacts on DO spaces and I have tried to add a website_redirect="/index.html" to all the bucket objects (js, html and css) but with no success (more info if necessary here). And to be completely honest I am not sure I understand that option in the terraform digitalocean provider. I might be using it completely wrong.
Now, I have seen that question in multiple places but never with a clear answer.
Here is one on digitalocean community (https://www.digitalocean.com/community/questions/is-it-possible-to-send-a-301-redirect-for-bucket-objects) where no answer is provided but the issue seems to be similar.
There is a similar question on SO without an approved answer Redirect wrong URL/path DigitalOcean Spaces
This is a DO idea that is somewhat related https://ideas.digitalocean.com/ideas/DO-I-318
Is there a way to achieve the mentioned goal of loading index.html for every route with DO space + CDN and let the app parse the rest of the path to display the right component subtree of the react app?
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 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 was wondering if anyone could help me at all.
I posted a previous question in regards to this title but I didn't receive much of a response (probably due to lack of information).
I started out with an Ionic Application and built the view files using state URLS to navigate from page to page in the WWW folder. I've then created corresponding controllers for the view files, for basic calls and functionality that I want my app to do in the front-end via Ionic.
My question is how do I setup MongoDB + Mongoose so I can have access to the models I have created?
I have scoured the internet but to no avail, I mean I know there is no set way to define a model within this type of application but some general guidance would be really appreciated.
I understand that when building an application with Angular you're essentially building 2 applications, the front-end where your CSS, JS and HTML goes with the front-end frameworks on top of them.
Then the backend application that runs the server, stores data and runs the business logic. This is where I have created the User Schema model for my application and have inserted a document into my database via the MongoDB shell whilst running mongod.
However I also created a users.js in another models folder in my front-end where I'm returning a resource following a url with either a get, save, query, remove or delete.
First of all I would like to say I'm relatively new to building mobile applications so this may even be entirely wrong and secondly up to this point I get lost as to what to do in my application.
I have tried setting up an express server in my app.js file and I can connect to it via my terminal as it is listening on the port number, but in the browser it is coming up with cannot /GET.
If you need any more information please feel free to ask, I know I haven't really gone into any technicals, but I'm really not sure even if I'm asking the right questions to begin with.
Thank you in advance.