why do we add this in static.json file at root =>
{
"root": "dist/",
"routes": {
"/**": "index.html"
}
}
static.json file is used with heroku-buildpack-static during deployment with heroku for handling static sites and single page web apps.
A number of options can be configured in static.json. Amongst them
Root allows you to specify a different asset root for the directory of your application. By default it is public_html/
Custom Routes
You can define custom routes that combine to a single file. This allows you to preserve routing for a single page web application. The following operators are supported:
* supports a single path segment in the URL. In the configuration below, /baz.html would match but /bar/baz.html would not.
** supports any length in the URL. In the configuration below, both /route/foo would work and /route/foo/bar/baz.
{
"routes": {
"/*.html": "index.html",
"/route/**": "bar/baz.html"
}
}
When serving a single page app, it's useful to support wildcard URLs that serves the index.html file, while also continuing to serve JS and CSS files correctly. Route ordering allows you to do both:
{
"routes": {
"/**": "index.html"
}
}
With the above configuration, your server will return the index.html for all paths and any routing is done on client side with react-router
Related
I have a SvelteKit application that I'm building with static adapter.
I'm setting a fallback in svelte.config to make it a SPA.
{
kit: {
adapter: adapter({
fallback: 'index.html'
})
}
}
In /routes I have a folder called (prerendered) that has a +layout.js file with export const prerender = true; as described in the svelte docs here.
If I put my root +page.svelte and a tree of nested article and marketing pages into that (prerendered) folder, I get prerendered html files for the articles, but not for index.html.
Is there a way to prerender index.html in a static SPA?
That is not what the fallback is for. It serves to resolve dynamic routes that have not been or cannot be pre-rendered and thus not served by a simple file server, all it does is route to a page.
If you already have a +page.svelte you want to use as the index, you should not set fallback. The page for the root route will automatically be turned into an index.html.
I'm having problems trying to access my website, it returns 404 status code.
I'm using React with Vite and Heroku.
I'm using this buildpack as it says in Vite docs:
Vite Heroku Deploy Doc: https://vitejs.dev/guide/static-deploy.html#heroku
Heroku Buildpack for static file: https://github.com/heroku/heroku-buildpack-static
Website page:
Folder Structure:
Static.json file:
Package.json file:
Vite.config.ts file
if you are having deployment issues with ANY single page application, use the following buildpack and make sure you are specifying the root folder of your bundled application
https://github.com/heroku/heroku-buildpack-static
This error can occur when:
1 - You don't specify in static.json file the index route. To solve it, just add this few lines:
"routes": {
"/**": "index.html"
}
Now you are saying that all routes redirects to index.html file.
If, for some reason, you want to add more routes for different html files, just do this:
"routes": {
"/": "index.html",
"*": "404.html"
}
In above example, when request reaches "/" route, it redirects to index.html, but if request uses any different route, it redirects to 404.html file.
2 - It also can happen when you don't have heroku/nodejs buildpack installed in your Heroku app.
If you are using Vite, you have to install both heroku/nodejs and heroku/heroku-buildpack-static
To install it you can access your app in heroku website, then go to settings, finally click on add buildpack button, place this url,save it and redeploy:
https://github.com/heroku/heroku-buildpack-static
I want to transfer my blog from Jekyll to NextJS and looking how to specify custom URLs.
I followed the official NextJS guide on their website, but the routing part was relatively simple. From docs, I got that URLs are based on folders/files structure, but I want to have a subfolder per site topic in the pages folder but keep URLs flat. Something like that:
pages (top-level folder)
investing (subfolder)
how-to-start-investing.js (https://example.com/how-to-start-investing <- no investing folder in URL)
devops (subfolder)
how-to-upgrade-ubuntu.js ([https://example.com/how-to-upgrade-ubuntu <- no devops folder in URL)
In Jekyll, I used Front Matter to specify a custom URL per page. In NextJS looks like I have to use rewrites, but is there any other option?
Also Link component has an attribute to change the link URL, but this is just to display links with URLs.
In NextJS, routes are defined by the structure of the pages directory. If you don't want that, you're going to have to work around that feature. Some options you have:
Use rewrites to map incoming request from /how-to-start-investing/ to /investing/... — note that unlike redirects, rewrites don't expose the destination path, so the user will stay on /how-to-start-investing/ url.
Create files in the root directory called how you want your routes to be exposed (e.g. how-to-start-investing.js). Inside the file, export another component, for example:
// how-to-start-investing.js
import { HowToStartInvesting } from "../components/investing/HowToStartInvesting";
export default HowToStartInvesting;
If you use this approach, I suggest you put your components somewhere outside the pages directory, so you don't have two urls for the same component.
Finally got it to work, so in order to use custom URLs, I have to combine rewrites with redirects, the latter needed for SEO.
Without redirects, I can just use the canonical tag to tell Google my preferred URL, but technically the same article keeps on being available using two URLs, in my case:
sypalo.com/how-to-start-investing
sypalo.com/investing/how-to-start-investing
So the final next.config.js is:
module.exports = {
async rewrites() {
return [
{
source: '/how-to-start-investing',
destination: '/investing/how-to-start-investing'
}
]
},
async redirects() {
return [
{
source: '/investing/how-to-start-investing',
destination: '/how-to-start-investing',
permanent: true
}
]
}
}
And this is to be repeated for all URLs.
I have a Next.js site, but for the Landing page I would use a WordPress site. How is it possible?
In the next.config.js, you can set rewrites to work like a proxy with specific application paths. If you want only NextJS homepage router to another domain homepage, you can do this:
module.exports = {
rewrites() {
return [
{
source: "/",
destination: "http://mywordpresssite.com/",
},
];
},
};
Docs
Everything depends on the hosting server that you will use for hosting those website's. You can use one domain for both but you might be forced to use different route's.
Example:
Landing Page : www.example.com or www.example.com/home
Wordpress : www.example.com/news
Using apache for hosting, you can define a .htaccess that would redirect to the right application depending on the route.
I would suggest you to look into that, unless you can provide us more details about your hosting solution.
Edit:
You can check out the vercel configuration file to route something to specific subfolder/files.
More info here: https://vercel.com/docs/configuration#project/redirects
My React App proxies requests to the backend using
"proxy": "http://localhost:3001"
Inside package.json for dev purposes.
Somehow when I use a React Router Link component for redirection, the request is sometimes forwarded to the backend through the proxy instead of requesting the frontend page to be served. Why is this happening? Also, it's INCONSISTENT! Meaning sometimes it will do it, and sometimes it won't, despite clicking on the exact same Link component. Any ideas?
I found a solution!
I have removed the proxy setting from package.json altogether and added a setupProxy.js file inside my src folder containing the following:
const proxy = require("http-proxy-middleware");
module.exports = app => {
app.use(proxy.createProxyMiddleware("/api", { target: "http://localhost:3001/" }));
};
Are you using identical routes on your front-end and back-end?
I would recommend you placing API in front of all your routes on the backend to avoid any inconsistencies.
so if your backend route was
/users
change it to
/api/users