I have structure like this and I want to set background url but I keep getting errors like "the server responded with a status of 404". What tools should I use to be able to link local images to project?
project
│
└──src
| | index.html
| | index.js
│ │ icons
│ │ images
| │
│ └───stylesheets
│ │ files.scss
│
│
└───public
│ index_bundle.js
Related
I'm developing a SvelteKit application and I have a couple pages, some of them should be public and others should have a session cookie (otherwise they should be redirected to /login), something like this:
/ -> root page, need session cookie or redirect to login
/invoices -> need session cookie or redirect to login
/login -> public access
/signup -> public access
I was thinking about using the following groups to breakout of the layout that checks for cookies
src/routes/
│ (app)/
│ ├ +layout.server.ts // checks for session cookie or redirects to /login
│ ├ +page.svelte // root page
│ ├ invoices/
│ │ ├ +page.svelte // /invoices page
│ (public)/
│ ├ +layout.svelte // public layout, does not check for session cookie
│ ├ login/
│ │ ├ +page.svelte // /login page
│ ├ signup/
│ │ ├ +page.svelte // /signup page
└ +layout.svelte // layout common to all pages
The other approach I thought about was to have something like this:
src/routes/
├ +layout.server.ts // checks for session cookie, unless path is login or signup
├ +page.svelte // root page
├ invoices/
│ ├ +page.svelte // /invoices page
├ login/
│ ├ +page.svelte // /login page
├ signup/
│ ├ +page.svelte // /signup page
That means, in the src/routes/+layout.svelte I should have a list of public endpoints for which I should skip cookie verification. By default pages should be protected.
Is there any other approach I might be missing? Is any of them more "correct" than the other?
I have a Sveltekit project with a similar structure
src/
├ routes/
│ ├ [...unknown]
│ │ └ +page.svelte
│ ├ category/
│ │ ├ [...path]/
│ │ │ └ +page.svelte
│ │ └ +page.svelte
│ └ normal/
│ └ +page.svelte
With the following config
import adapter from '#sveltejs/adapter-static';
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
prerender: {
entries: [
'*',
'/[...unknown]',
'/category/[...path]',
]
},
},
};
export default config;
the project can be built without errors and in preview mode the routing works as expected.
After deploying it to firebase hosting the dynamic routes give a Page not found error described in this question Sveltekit [...slug] dynamic routing returns 404 error after deployment Trying the provided solution the error on the page changes to Dynamic Link Not Found
So besides hoping to solve this, I'm first of all interested in understanding what exactly is going on here with the dynamic routes and what server and setup is needed to host the project where these routes/files will be correctly resolved
/[...unknown].html
/category/[...path].html
I am working on React project and I have a problem with pointing to the image assets from scss files with relative paths. In general, relative paths are working locally, but after deployment to github pages, the route to image assets lacks the github repo name part. I don't know if it's the webpack configuration issue or I am writing relative paths incorrectly.
Here is my folder strutcure
├───config
│ └───jest
├───public
│ └───assets
│ ├───css
│ ├───fonts
│ ├───images
│ │ ├───background
│ │ ├───icons
│ │ ├───illustration
│ │ ├───logo
│ │ └───projects
│ │ ├───one
│ │ └───two
│ ├───js
│ └───scss
│ ├───blog
│ ├───common
│ ├───default
│ ├───elements
│ ├───header
│ └───template
├───scripts
└───src
├───component
│ ├───common
│ ├───footer
│ ├───header
│ └───slider
├───elements
│ ├───blog
│ ├───common
│ ├───portfolio
│ ├───projects
│ └───tab
└───home
Example url path defined in scss file:
.big-center-circle {
background: url("/assets/images/background/circle-1.svg") no-repeat center top,
}
Resulting route in deployment
https://username.github.io/assets/images/background/circle-1.svg
Desired route in deployment
https://username.github.io/repository-name/assets/images/background/circle-1.svg
I use react-router-dom for routing and relative paths work correctly in jsx files. I only have issue with urls in SCSS stylesheets.
Solved. I turned out that the url to asset should define relative path from the main scss file placed in src folder.
Basically, I have springboot application serving my index.html and other static JS files which includes(runtime, vendor, main) chunks created during the production build by Webpack. How do I set cache-control settings for index.html and chunks separately so that index.html won't be cached and chunks will be cached on the client-side? Currently, I have my resources under static folder like the following:
├── static
│ ├── index.html
| |-- bundles
│ │ ├── main.js
│ │ ├── vendors.js
│ │ ├── runtime.js
`
Basically, I am aiming for long-term caching of static assets on the client-side.
I interpret your question as asking how you can control this in Spring.
I think the better way to achieve what you want is to let Webpack output the different chunk-names so that they are cached for a long time (or until you deploy a new version of a chunk), not by specifically setting cache related headers for each filename.
The Webpack caching documentation recommends outputting the different chunk filenames to also include the contenthash.
output: {
path: path.join(__dirname, "build"),
filename: "bundle.[contenthash].js",
}
This will name your current bundle.js to something like bundle.7b4c86b268840bec8c4d.js. The first time a browser visits your site it will cache that chunk for a long time, typically a year but it depends on your configuration.
When you make changes to whatever code goes into bundle.[contenthash].js, the value of contenthash will change and the browser will cache that new version of your site/bundle since the filename doesn't match the cached bundle filename any more.
For more information, please refer to the aforementioned Webpack caching documentation
Here is the file structure of my website:
public
│ 404.html
│ app.yaml
│ index.html
│ index.xml
│ prereqs.zip
│ sitemap.xml
│ sof2018.py
|
├───categories
│ index.html
│ index.xml
├───css
│ styles.css
├───home
│ index.html
├───js
│ scripts.js
├───prerequisites
│ index.html
├───scripts
│ │ index.html
│ │ index.xml
│ │
│ ├───page
│ │ └───1
│ │ index.html
│ │
│ └───sof2018
│ index.html
├───tags
│ index.html
│ index.xml
└───usage
index.html
Basically I need to ensure the following:
if any folder is called with trailing slash (say /scripts/page/1/ or /home/), it should look for index.html inside that folder
if any folder is called without trailing slash (say /scripts/page/1 or /home), it should look for index.html inside that folder
if any file (say /css/styles.css or /prereqs.zip) is called, it should return the file
The way to differentiate between files and folders could be to simply to check if there is a period(.) since all my files have extensions. Though I guess someone else might benefit with a solution that handles extension-less files also.
I have tried a number of different regexes, all of them seem to missing out some case or the other. Also tried all the solutions proposed in previous questions on stackoverflow on pretty much the same thing.
I'm not looking for an app.yaml tailor-made for my website, that can be done by manually dealing with each of the folders, cases, etc.
I'm looking for a general solution that would work exactly how a traditional web host would work, since I'm guessing that would benefit others as well. Then I'll be free to add/change content/structure without having to update app.yaml every time.
P.S. In all honesty, google should have themselves provided the solution, but they haven't. I'm guessing even proper web devs aren't regex masters.
P.S.2 The website is made using the Hugo static site generator. I can confirm it is working on a traditional web host (GoDaddy). Also I don't know enough html/css/js to tell for sure what is the actual internal working of the site; if required I can provide the source files.
You cannot achieve all of this on (standard environment) GAE with a completely static website. That's because you have no way of telling ahead of time (i.e. when creating the app.yaml config) if /some/path/item is a file or a folder and thus /some/path/item or /some/path/item/index.html should respectively be returned.
It's not a matter of writing the right regex, it's a matter of wanting 2 different outcomes for the same regex.
To achieve what you want you need the app to check the condition at runtime and make the decision - not a static site anymore.
If you drop your 2nd bullet you can achieve the rest with this:
- url: /(.*)/
static_files: public/\1/index.html
upload: public/.*/index.html
- url: /(.*)$
static_files: public/\1
upload: public/.*
If you have a way of differentiating files from folders you may be able to come up with a scheme. For example by specifying that all filenames must have extensions (and directories cannot have . in their names), then you can do something like this:
# /optional/path/folder/ - serve index.html inside
- url: /(.*)/
static_files: public/\1/index.html
upload: public/.*/index.html
# /optional/path/name.extension => files - serve them
- url: /((.*\/)*[^\/]+\.[^\/]+)$
static_files: public/\1
upload: public/.*
# anything else is a folder - serve index.html inside
- url: /(.*)$
static_files: public/\1/index.html
upload: public/.*/index.html