I want to publish my site on firebase hosting.
I'm using Static Generate in Next.js to create a page.
However, there are some pages that I want to do dynamic routing like a blog.
The URL looks like this "blog/[slug]"
If reloaded on a page other than the top page, it will be 404, so use next.config.
"Trailing Slash: true" is set.
When Dynamic Routing is performed with SG, the page has a file such as "blog/[slug]/index.html" exported.
Normally, it works fine for the transition from the top screen, but
If you reload with that URL, it will be 404.
One way to solve this is to detect that the blog is updated and rebuild it with WebHook etc. and deploy it.
There are various ways to do this on the website, but it is difficult to build each time because the update frequency is high.
Next, I'm thinking of doing CSR (Client Side Rendering) only for the blog part in the SG site.
Can't you route using a regular React Router? about it.
I tried to use React Router only for some pages, but I get an error because React Router is not a server side process.
Is the second thing I'm trying to do feasible?
If you have any other solutions to this problem, please let me know.
PS: Firebase Functions cannot be used due to a cold start issue...
Best regard.
It seems that it was solved just by entering the rewrite setting.
Thank you to everyone who saw the question.
"rewrites": [
{
"source": "/notice/**",
"destination": "/notice/[slug]/index.html"
}
Related
I have a web app built with react, and is hosted on Firebase's Hosting, and served with cloud functions.
An example of serving the index.html from cloud functions, is changing the .htaccess:
"rewrites": [
{
"source": "**",
"function": "[functionThatReturnsIndex.html]"
}
],
I export the build, and then I serve the index.html from a function, which works fine.
I do this, so I can dynamically set the META tags for each page.
This both loads fine, and when I share a link on a site, like twitter/linkedin/facebook etc., the META information that those websites fetch is also correct and as expected.
However, I'm getting an error (redirect error) from the search console, when trying to index my site.
It suggested I use Lighthouse in the chrome web tools to test what's wrong, and I got decent results:
This is my robots.txt:
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
I'm not sure what else to try, or why it's not indexing. Any help would be appreciated.
Let me know if I can provide more information to make the solution more obvious, thank you.
Update 1:
They are 2 types of Sitemaps viz: Static and Dynamic Sitemaps.
In your case, you need a Dynamic Sitemap to discover dynamically created contents in your React App automatically.
I'll suggest you use https://www.npmjs.com/package/react-dynamic-sitemap
to implement a dynamic sitemap and submit the resulting Sitemap URL to Google.
Hope this helps you in fixing this error.
I have developed a few react webapps using Jhipster. Recently, I tried to start a new project. I cannot get new routes to load any of my components. This is something that I have been able to do very easily in the past (as earlier as two months ago). The page loads, but the body where the component should be isn't loaded. I have tried various approaches, and I'm stumped. Can anyone generate a simple test application and verify that adding new routes works? I appreciate your time.
I'm not sure if you solved this but I was having the same issue and what worked for me was to make sure that the route I was adding was above the route to "/" in the code.
Per this guide https://reactrouter.com/web/guides/primary-components routes should be ordered from more specific to less specific. I had my new route at the bottom of my route list in the code, but when I moved it above the "/" route definition, it worked.
I'm trying to deploy a create-react-app to a relative path on GitHub pages with a custom domain. E.g. www.example.com/myproject
I'm using react-router-dom, react-router-redux and react-router-bootstrap
I've set homepage to http://www.example.com/myproject in packages.json (tried homepage = "." too) and also configured basename for my history:
...
export const history = createHistory({ basename: '/myproject' });
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);
The deployed app works on www.mydomain.com/myproject and I can navigate via the app links.
But I got 404 when I try to enter a path directly (eg. www.example.com/myproject/account) or if I do browser refresh on a subpage.
Long term goal is to configure different relative paths for dev and prod environments as described in this answer but first I just need to make it work in deployment.
Problem: URL gets evaluated on server side
When you enter a new URL into address bar of the browser or refreshes the page, browser requests server (in this case GitHub pages server) for that URL. At this point, client side router (react-router) can't take action as it is not yet loaded for that page. Now server looks for a route that matches /accounts won't find it (because routing is done on client side) and returns 404.
Solution
If you had control over the server, you can serve index.html for all routes.
This is explained in create react app documentation serving apps with client side routing.
As we don't have that control in case of GitHub pages, We can try these.
Easy Solution
Switch from browserHistory to hashHistory
With this change, your URLs will go from looking like
www.example.com/myproject/account
to
www.example.com/myproject/#/account
So it's a bit messy.
Harder solution
Get GitHub pages to redirect to index.html on all requests. Basically you have to add a 404.html in your build directory with code to redirect to index.html. More on how to do that.
Create React App has documentation around client-side routing in GitHub pages too
The best way to solve the issue is create a copy of index.html and call it 404.html for production build. To make it add this to package.json scripts:
"build": "react-scripts build && cp build/index.html build/404.html"
The reason is because the browser may not have cached the routing code yet so it causes a 404 error if you go to a route other than the index.
Side note if anyone is using ZEIT Now to deploy (although gh-pages would be similar); I managed (after a deal of time) to work out how to fix it. It was a bit of an effort so I decided to make an article on it for anyone else who gets stuck.
https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb
I have this URL now:
http://unav-go.github.io/?p=37.1966,-3.6245
I would like to have a nice URL like this:
http://unav-go.github.io/37.1966/-3.6245
I was reading the Jekyll documentation, but I didn't find how to do this. Is this possible? Thanks in advance |o/
No you cannot. http://domain.tld/path/ is an url pointing to http://domain.tld/path/index.html or whatever you've set your index page to be in your server configuration.
http://domain.tld/path?param=value is an url (always pointing to http://domain.tld/path/index.html) with parameters that are used server side (as your site is static, they are not used server side) or client side by javascript (it's how you use them to generate your gmap marker).
Doing http://domain.tld/path/value suppose that you can process the url server side to transform it back to http://domain.tld/path?param=value. But it's not possible in static world.
Doing:
http://unav-go.github.io/37.1966/-3.6245
would just direct to another location in your Jekyll site.
So, I don't recommend doing that. It's possible to do that but you will be redirecting and you would be creating a lot of links to redirect to the proper locations since the app is utilizing the parameters in the URL.
I'd suggest going for the former.
http://unav-go.github.io/?p=37.1966,-3.6245
One of our developers has decided to pass a whole JSON object in the URL because the state of the page needs to be rebuilt when shared on social media or elsewhere. Here is an example of one such URL:
<mydomain.com>/<my-route>/{"AspectValues":{"camera":3,"battery":3,"display":3,"performance":3},"PriceMinValue":5000,"PriceMaxValue":90000,"SelectedBrandFilters":[],"SelectedOsFilters":[],"SpecificationWeight":3,"SentimentWeight":3,"ExcludedBrandList":[],"SelectedScreenFilter":["3-4","4-4.5","4.5-5","5-5.5","5.5-6","6-above"],"TimeSort":null,"PriceSort":null,"ScoreSort":null,"allPhones":false,"category":"Smartphones"}
Firstly, this URL does not seem SEO-friendly and Secondly, it does not look good. We are using nginx as our webserver and AngularJS as a JS Framework.
I want to know what are the options I could explore to resolve this situation without breaking much in the current JS implementation to re-construct the page.
Using nginx to rewrite seems like one option but the route mapping to create SEO-friendly URLs and still obtain all the information in the JSON URL seems pretty tricky. Any other ideas will really be helpful.
Thanks a lot, people. :)