I'm building a short link application like bit.ly using the MERN stack. I want the static pages of the app to be hosted on a seperate server from the API. My architecture needs to be:
API:
POST - example.com/link - create short link.
PUT - example.com/link:slug - update short link.
GET - example.com/:slug - fetch/redirect short link to long link.
Static site:
GET - example.com - Homepage.
GET - example.com/:slug-that-doesnt-exist - 404 page.
GET - example.com/blog, example.com/docs, example.com/support etc. - Various static pages
The issue I'm having is getting the server to delineate between the two types of requests to the same domain, often on the same path.
example.com/abc123 is the API while example.com/blog is the static site, even though the express router example.com/:slug is matching both. To complicate it example.com/zxy987 hits the API but doesn't exist so needs to redirect the request to the static server. I also can't figure out how to redirect the request itself without the URL changing to the other server. I considered using NGINX but it doesn't appear it could handle the example.com/:slug-that-doesnt-exist type requests since it wouldn't know if they exist at the time it runs.
What is the 'best' way to approach this?
Related
I have existing app that runs on Heroku. It's a simple web app with no background jobs or database.
Basically it has three endpoints. One of them serves the HTML, the other is POST endpoint for communicating with backend and third is GET endpoint that renders error HTML content as well.
Now the frontend is not single page application and the goal is not to be one. It's just HTML page with a form and some links. The front end can be used without Javascript.
My questions are:
Can I re-use existing ExpressJS code? I was thinking about importing route callbacks and use them inside the "functions".
I know there is Firebase hosting that can serve static content. However, as I mentioned the server can respond with HTML content so I'd need traditional routing (such as /error url for rendering HTML error). In my ExpressJS app I use .ejs templating so I'd like to load the template and render it.
Can Firebase be set up so the "backend" (functions) can be placed on my own domain? I'd like to call relative URLs from my index file (like that POST endpoint) instead of using Google Firebase URL.
I'm really just trying to find out if my use case can fit the Firebase infrastructure. I think it's a good candidate since I need the web app to respond infrequently and it's not really demanding, not many people would use it. This is also my hobby project so I'm trying to minimize costs.
To answer your questions:
Yes you can, but keep in mind some things are limited. In my case, I had tried to use multer library for multipart forms but didn't work and had to resort to using busboy instead. To use an Express app for a function endpoint, you simply just pass your app as the onRequest function parameter like so: functions.https.onRequest(app).
Docs:
https://firebase.google.com/docs/functions/http-events#using_existing_express_apps
The hosting is for static files only. You can't use that with .ejs. Unless, you're thinking to use that as a proxy to your Express app..
Yes, you can set custom domains so you can use your domain(s) instead of default ones. Reference: https://firebase.google.com/docs/hosting/custom-domain
From your project's Hosting page, enter the wizard for connecting a custom domain:
If you have only one Hosting site, click Connect domain.
If you have more than one Hosting site, click View for the desired site, then click Connect domain.
Enter the custom domain name that you'd like to connect to your Hosting site.
(Optional) Check the box to redirect all requests on the custom domain
to a second specified domain (such that yourdomain.com and
www.yourdomain.com redirect to the same content).
Click Continue to initiate the validation process.
I have a React SPA that is being hosted as an Azure Static Website. The configuration is rather simple - html, js etc files are deployed to Azure Storage. I then enable the static website feature and expose this via a Verizon Premium CDN Endpoint.
The Static Website is configured to serve index.html as the index and error document. The issue that I am seeing here is that when a route is requested /faqs for example the response is a 404 with the index.html doc as the response body - this works fine in the browser but Google will not crawl it as it's seeing the response as a 404.
I wonder if there is anyway around this? Is there anyway to force 2** response codes?
Well after messing around trying to configure Azure to force status codes I found a solution, it's not ideal but it works and will be fine for now.
SOLUTION: I cloned my index.html as faqs (no extension so manually set content type) so that the respective version is served when requested. Happy days! Glad I only have a small number of public pages.
Since you have the CDN layer in front of your website, you can have the CDN deliver the index.html via a URL rewrite rather than relying on the static website's "error page" delivery mechanism. This holds up even if you have a variable number of routes in your application.
Configure a rule in your CDN's Rules Engine that takes any path without a file extension (since we want normal requests for assets or script/style files to return those actual files) and rewrites to /index.html. Re-write means the URL of the actual request remains the same, but the file that gets delivered comes from the rewritten URL.
See this article for more.
Netlify noob here.
I'm currently migrating an old Ruby on Rails app to use Netlify for a static site. There are some legacy static pages that we want to keep on our old code base, and these legacy static pages make POST requests to our server.
It seems like redirects for POST requests aren't possible (see the W3 documentation for 301/302 redirects- If the 301 status code is received in response to a request other than GET or HEAD, the user agent MUST NOT automatically redirect the request unless it can be confirmed by the user, since this might change the conditions under which the request was issued.), but I was wondering if this is different when you proxy/rewrite the URL.
Currently, we rewrite a user's request to www.domain.com/legacy_slug via Netlify's splat redirect (similar to what the author of this blog post did). Is it possible for this redirect to work as well when the user sends a POST request to www.domain.com, causing it to go to Netlify? Or would I have to change the client's code to POST to <different_subdomain>.domain.com/legacy_slug and migrate the POST endpoint to the different subdomain?
Proxies (https://www.netlify.com/docs/redirects/#proxying) accept POSTs, redirects (https://www.netlify.com/docs/redirects/#basic-redirects) or rewrites (HTTP 200 that transform from one path to another, both on netlify-hosted sites), no.
Kind of a subtle distinction. So - I'd send the POST to some other path (not some other domain - just /place-we-post-to on your Netlify site, and use a proxy redirect to get to your remote service (/place-we-post-to https://legacybackend.com 200 in _redirects)
I'm new to web development and i want to ask that why some website have the "/"?
for example https://www.roblox.com/home, notice the "/home" what does that called
I have tried to search on google and i can't find the answer
And some website have like "/login.php", "/index.html" it can also be html?
These are URLs (https://en.wikipedia.org/wiki/URL) and they identify the resource you are trying to reach. I would suggest reading more about how web pages works to get a better general overview of things(e.g.: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
How these resources are actually interpreted depends on the server side implementation:
.php are usually processed by PHP web server
Other static files such as images (*.png , *.jpg, etc), html files, svgs, CSS, js, etc - Are usually located in the local server by the web server (httpd, tomcat, IIS, nodejs, and many many others) and the files as transmitted to the client 'as-is'
When using online tools to build websites, these complexities are usually abstracted away, and in the end URLs will just mean a resource identifier.
[domain]/[section]/[page(.html|.php)|resource(.js|.css)]
domain: the address of the website
section: a way to navigate inside the website itself
page: the user interface that might be rendered server side of client side hold the controls shown to user
resource: files that changes how the content in the pages looks and behaves like
I would like to create the following scenario in my web project, but as I am not pro web developer I don't know how to handle this.
Let's assume that I have project with main domain:
http://foobar.com and on this I have a links to the following subdomains:
http://xx.foobar.com
http://yy.foobar.com
I would like to that every site hosted on subdomains used the same code with only one different parameter sent to the subdomain from main page. This parameter will be a JavaScript variable. I am using Azure Web Sites from my project. The main question here is how to manage the code (now I am using Continuos Integration with GitHub) through these subdomains (the source code for every subdomain would be the same, except this one variable). Where should I start to search / read?
Are you passing any value for the parameter? Or is it just a static parameter? If it's static, you could possibly use JavaScript code to read the subdomain name in the URL.
Not sure what language you're using on the server, but you should also able to read the subdomain via server-side code.
But if its value is dynamic, the main page with the links can generate a QueryString parameter to pass along in the URL. Your implantation will vary depending on what language you've selected.
UPDATED, with additional info:
When you say "share the project source code between subdomains", do you mean that you want to deploy the same web app to multiple endpoints?
If so, you can create a separate Web App in Azure (formerly known as Azure Web Site) for each corresponding subdomain, and set up your source control to deploy to both of them whenever you check in your code.
References:
https://azure.microsoft.com/en-us/documentation/articles/web-sites-deploy/
https://azure.microsoft.com/en-us/documentation/articles/web-sites-publish-source-control/
Since you have no server-side code, I'm using you have only HTML/JavaScript/CSS files. So, you can write JavaScript code to read the parameter from the URL.
References:
http://www.w3schools.com/jsref/prop_loc_href.asp
http://www.w3schools.com/jsref/prop_loc_pathname.asp
http://www.cssmojo.com/the_location_object/
As I mentioned earler, you would set up the links on the main index page to pass in QueryString parameters:
e.g.
Link 1: http://sub1.mywebsite.com/?param1
Link 2: http://sub2.mywebsite.com/?param2
Hope that helps!
First, make sure you point your domain to your azure website using wildcard (references)
Second, in your html head, find the subdomain using javascript and assign in to the variable you want to use
var full_url = window.location.host; // e.g. subdomain.host.com
var parts = full.split('.'); // split it
var subdomain = parts[0];
now you can use the subdomain variable to change your website based on subdomain value (e.g. change the content)