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.
Related
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.
Hey. I have a problem with react. I use '/' path for client (some static html content), and '/panel' for example for another server using 1 domain.
But i have errors which don't load my react page.
So on home location (http://localhost/) all good.
http://localhost/panel - only 'react app' in title.
That's because your React app tries to load the CSS and JS from the root path. Configure the homePage field in package json to be
"homePage": "/panel"
I have a NextJs project exported as a static site being hosted on Digital Ocean's App platform, using next/router to handle routing.
The issue is that refreshing on any route outside of the base route "/" throws back a 404. Other answers mention using the error_document or catchall_document in DO's app specification as a fallback file, but the other routes still 404 on refresh and redirect back to that fallback document.
What is the proper way to tell the platform to route to the correct url on refresh?
I had a similar issue, and what solved it was going to my App settings, and on App Spec updating the .yaml file with all my routes.
Where it says
routes:
path: /
Update it with your other routes like:
routes:
path: /
path: /Menu
Solve the App reloading leads to 404 site
Download current app spec from https://cloud.digitalocean.com/apps, in the settings tab you will find App Spec to yourappname.yaml file
Add catchall_document: index.html
Source: APP Platform: App reloading leads to 404 site
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
I have just generated an Spring/Angular app using JHipster.
I successfully accessed the home page by using this URL: http://localhost:8080 which redirects to http://localhost:8080/#/ and the index.html file is loaded properly.
I am not sure how Angular and the browser determine that they need to load the index.html file.
Where is this configured in a JHipster app?
edit: Is there some "default home page" configuration somewhere?
I successfully accessed the home page by using this URL:
http://localhost:8080 which redirects to http://localhost:8080/#/
The request to the server is for "/" and index.html is served. The "/#/" is all client side stuff (Angular routing) that happens when the javascript on the index.html page fires up, not the result of a server side redirect.
Where is this configured in a JHipster app?
This is a Spring Boot default, not something specific to JHipster. From the Spring Boot docs:
The auto-configuration adds the following features on top of Spring’s
defaults:
Static index.html support.
By default Spring Boot will serve static content from a directory
called /static (or /public or /resources or /META-INF/resources) in
the classpath or from the root of the ServletContext. It uses the
ResourceHttpRequestHandler from Spring MVC so you can modify that
behavior by adding your own WebMvcConfigurerAdapter and overriding the
addResourceHandlers method.
I don't think this is configurable through a property file or something similar, you'll have to write some code. See the answer to this question.