I have a Gatsby application with below structure:
src
|-pages
|- dashboard.js
|- projects.js
Once deployed on Netlify, these pages (obviously) are accessible via below URLs:
https://domain.netlify.app/dashboard and
https://domain.netlify.app/projects
Now our requirement is to access these pages via subdomain after configuring custom domain on Netlify.
So our the URL for our dashboard page would be
https://dashboard.customdomain.com
and URL of projects page would be
https://projects.customdomain.com
Now the questions are :
(1) Whether such implementation is possible with Gatsby
(2) If yes then what and where do I have to make changes to check the subdomain and accordingly serve the request.
No, it's not easily possible. This would mean you have completely different URLs for these pages in development (e.g. the relative path /dashboard) and in production (https://dashboard....). It will also necessarily mean that your JavaScript code is duplicated between the two domains and therefore loaded twice, which seems wasteful.
If you need the pages to be on two different domains I'd suggest you develop two different projects for them.
Related
Summary
I'm trying to setup Next.js with static website hosting on S3 and CloudFront. For the most part it works but I'm having trouble with dynamic routes.
My directory structure looks like this.
pages/
index.js
about.js
[id].js
Currently my Next.js config is set to trailingSlash: true so when I run next build && next export my exported static files look like this.
out/
index.html
about/
index.html
[id]/
index.html
This means that when I visit "123456.cloudfront.net" or "123456.cloudfront.net/about/" the correct index.html is displayed. However when I visit "123456.cloudfront.net/1/", I obviously get an error message instead of out/[id]/index.html.
Caveats
The id pages are added, removed and updated regularly, so I don't want to generate them at build time using getStaticProps and getStaticPaths.
Solutions I've considered
I tried routing the S3 error document to out/index.html in the hopes that it would load the home page, run the JavaScript, recognise the path and end up showing the correct [id] page but it just stays on the home page.
I've considered trying a solution with Lambda#Edge to load the correct page but anytime I add or change paths in my application, I would probably need to update the lambda which seems messy.
Am I missing something?
After doing some more reading into this, I realised that serverless next.js is basically aimed at solving this same problem. It hosts your Next.js app in an s3 bucket and then uses a combination of CloudFront behaviours and Lambda#Edge to route your requests to the correct place.
It also includes support for a lot of other Next.js features, so it looks like that's the way to go for now.
After more than a year of keeping with my ego to host it purely with S3 and cloudfront, I have moved to Vercel. If your site has a large number of pages say a product listing, then for SEO and performance you have to have ISG (Incremental Static Generation) and you can not do that with pure S3 and Cloudfront combination. We fought hard and it seemed like our engineering was going to build a product like vercel rather than own product development. So finally pulled the plug and moved.
NOTE: I do not work for vercel, and this is just a revelation after 1.5 years of S3 + Cloudfront + LambdaEdge based struggling, and live was easy after that.
I am using django on the backend and on the front end I am using react with create-react-app.
I have different apps on my web page that are somewhat independent from each other:
mydomainname/home
mydomainname/foo
mydomainname/bar
They are all somewhat connected but logically completely different which is why I separated them.
Is this handled with only one create-react-app and one index.html file in the build folder? And something like the browser router package for the different apps?
For example, if I look at the Facebook homepage (in case I want to build that with React) I understand that my news feed and my profile page and other people's pages are all connected and share similar components which is why it would make sense to have one index.html file.
But if I create a new public page (e.g. for a business figure), are all these components and functionalities handled in the same one index.html file? I could imagine that this will run into memory leaks and performance issues, or is this not the case? I can't seem to find anything about that neither in the create-react-app documentation nor through google.
React is not Html. In React you have only one page named index.html in folder public. The "pages" in react are named as 'Components', so you just create components and link them to each other. The first generated example component is App (App.js) component in src folder. All the transitions (transition from one component to second) will be done in index.html file.
When creating an app with create-react-app,there is only one index.html,does that means React can only handle one SPA at a time? What if I want to develop multiple pages? Should I create another SPA with create-react-app and then put them together after building each of them?
Update:
Parceljs can do that. here is docs.
You can use Parcel instead of Webpack (which being used in create-react-app) and it provide you zero config environment to develop web apps (using react or anything else).
Having multiple pages (instead of SPA) is not what most React environments had in mind [before - see update above].
You can have different page URL's using react-router or similar client side routing solutions.
If the concern is bundle size, there are solutions using webpack or parcel to lazy load each bundle whenever they needed or cache bundle (using service workers) and so on (Tree shaking, ...). (check Code Splitting in React Docs)
Other concern I might have in my brain is SEO, in this case you may find Isomorphic app (react server side rendering) useful which initialize first view of requested URL HTML and sends it to client, then client will load react and react will take control of UI. This will help Google (or other search engines) find your URLs fast and user experience in transitions between pages will remain seamless.
I want to serve same index.html page for all (sub)urls in my app on gh-pages
is that possible?
right now when I go to repo/inner/path I get a 404
so I want to "force" github pages serve the same root index.html on all routes
This may or may not be in the cards for you, but it seems you're setting up routing for a SPA. Many client based routers offer hash-based routing precisely for this reason so that you don't have to configure your hosting provider to redirect urls to return index.
The landscape of solutions seems to be:
Use Hash-Based Routing
USE: https://example.com/index.html#inner/path
NOT: https://example.com/inner/path
React Router - <HashRouter>
Angular - HashLocationStrategy
Vue Router - {mode: 'hash'}
Use the custom 404 page for gh-pages to redirect all missed traffic back to index.html
Choose a different free static hosting provider that allows basic url rewrites or redirects like:
netlify
surge.sh
It doesn't look like github supports this feature right now, so you'll either need to avoid deep link requests to the server or change to a hosting provider that allows you to do so.
Further Reading:
Can I create routes with react-router for a github-pages site?
Add single page application support for Github pages
S(GH)PA: The Single-Page App Hack For GitHub Pages
Check out Single Page Apps for GitHub Pages. It uses a custom 404.html file with a redirect script to always serve index.html, while preserving the path that was originally requested.
If you can list all possible urls for your application, you can use jekyll redirect from on github-pages.
Sadly, it will be difficult to list all urls that contain a specific id or name like /path/customer/id where id can be any integer.
You will have to find another hosting like netlify or cloudcanon which allows you to configure real redirections.
I have two different AngularJS applications hosted on different servers. I want to be able to have a link in one application to the other. How can I do this? Is it just as simple as adding an href to a url that loads the other module from the other server?
Note that these are two completely different modules with different dependencies and routes.
Update: by link, I mean have one SPA link to a different SPA