Vercel giving 404 error when using a custom URL - javascript

I am developing a code playground. Everything works in my computer,
It has a saving system. Encodes your code and puts it in the URL. When page loads, gets the code from the URL. It works perfectly fine. It uses Vite, vanilla JS, and I used the Vite setting on Vercel, but the saving system doesn't work. When you reload, instead of getting the code, It gives a 404 error message, as the URL isn't on the dist folder.
What can I do?
Complete code: https://github.com/L1ghtingBolt/codeebox/

Add vercel configuration to your root directory.
vercel.json
{
"rewrites": [{
"source": "/(.*)",
"destination": "/" }]
}

Related

Laravel Vuejs Uncaught (in promise) ChunkLoadError: Loading chunk blogs-component failed

I have a Laravel + Vuejs project and while everything works fine on local development, 2 pages are throwing the ChunkLoadError.
I have looked at other issues on SO, and checked my output path, file is really there.
Page is here : https://dev.trouveruncouvreur.ca/guide-toiture and same for https://dev.trouveruncouvreur.ca/city/d-soumission-couvreur-toiture-Brossard
Error is here :
The chunk is available if you click on the link https://dev.trouveruncouvreur.ca/js/blogs-component.js
Edit: I deleted the project from the dev server, and reinstalled everything without success. I keep having the same issue. I did install on another server I have access to, and the error is gone, pages are all served correctly. We just found out client on dev server is using Cloudflare, so once we have acces, we can delete cache and see how it goes.
In this case, Cloudflare's cache was the culprid. All vues files/chunk are now correctly served.

Nextjs custom 404 page not showing when accessing invalid url in netlify

I've created a 404.js file in /pages folder on my Nextjs project, the 404 page is working perfectly when entering an error or invalid URL in local but when its deployed in netlify they showing the default netlify error page.
version details
"next": "^10.0.4",
"react": "17.0.2",
Tried netlify's redirect rule, but nothing happened
[[redirects]]
from = "/*"
to = "/404.html"
status = 404
I found a solution when randomly changed the redirects rule based on this article https://docs.netlify.com/routing/redirects/#syntax-for-the-netlify-configuration-file
Here is my fix, it's working when redeployed after.
Create a netlify.toml file in the project directory and paste below code.
[[redirects]]
from = "/*"
to = "/404"
status = 404
I found two solution from this page =>
https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/
I added a _redirects file inside the /public folder like /public/_redirects. I then pasted /* /index.html 200 into the _redirects file.
redeploy your app and it's done
Or second way:
Add netlify.toml file to the root directory of your project and paste in to:
[[redirects]]
from = "/*"
to = "/"
status = 200
redeploy your app and it's done

AngularJs cannot get route with dot in url on localhost

Using route provider and having this route set:
.when('/:name/:id', {
It works (enters on my route and execute the code) when I use:
https://localhost.myapp.com:9000/Paul/123
But it does not work using this url:
https://localhost.myapp.com:9000/Paul/123.456
But my id = 123.456 so I need to use the second scenario and I get error "Cannot GET ..." so I believe that the dot is the issue.
If I check the network tab it I see that the browser interprets 123.456 like a file for example readme.txt it thinks that the chars after the dot is the extension of the file.
Strange thing is that on production it works.
Any ideea on how to fix this ?
I have managed to find an answer to this issue. It was related to webpack which was present only on my localhost and not in production (this explains why I had this issue only on localhost).
I had to add this setting in webpack config file webpack.dev.js under devServer section:
historyApiFallback: {
disableDotRule: true
}

Firebase Hosting can't find Express Endpoints

I have set up hosting on Firebase and configured my Node.js express app following the documentation provided by Google. Including the proper folder structure and command line instructions to init firebase and firebase-functions.
Folder Structure:
Project
-- functions
-- node_modules
-- index.js
-- package.json
-- public
-- index.html
-- 404.html
.firebaserc
firebase.json
I have added the express app to the firebase functions http request via the code below:
// Set up endpoint
app.get('/api', (req, res) => {
res.json({
message: 'Welcome to the Line Prophet API. Good luck.'
})
});
/**
* Firebase cloud functions
*/
exports.app = functions.https.onRequest(app);
My Firebase.json file is set up to direct all request to the app destination:
{
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "app"
}
]
}
}
Once I run firebase deploy from my parent directory everything goes through fine and it says the app is deployed:
However after that I navigate to https://line-prophet.web.app/api and I recieve a 404 page not found error.
I have tried to run this locally with firebase serve and I have the same issue. This was working briefly which is why I feel as though everything is set up correctly, however after deploying again it has broken for good. Any tips are appreciated. Thanks!
The latest deployments say there are only 4 files deployed to Firebase which seems very low. I checked the Functions tab and I do see that "app" is in there and the source code is correct.
Thanks to #LawrenceCherone changing the firebase.json file to:
"rewrites": [
{
"source": "**",
"function": "app"
}
]
solved my issue. I was using destination instead of function because of the online docs, but it makes more sense to direct all requests to the function you have set up to handle http request.

Webpack can't load the json file, how to locate the local json file and load that using http.get with AngularJS

I am using AngularJs of ES6 syntax, I am trying to load a local themes.json file from ApiService.js
getThemesOptions() {
this.$http.get('src/app-builder/p3-modal/themes.json')
.success(function(data) {
console.log(data);
})
.error(function() {
});
My file structure:
src/
app-builder/
p3-modal/
themes.json
service/
apiService/
apiService.js
From the console, looks like it found the file successfully, but the output is very strange,
Because themes.json looks like this:
I am running the application using Webpack, the url to access the application is not normally localhost, but http://10.98.142.233:8080/o2/search/ab instead, I don't know what cause the problem
Please tell me how to load the json file from local correctly , using AngularJs ES6 with webpack.
Thanks!
This is the network tab.
No, actually what happens is it can't find the JSON file, and the Webpack dev server routes the 404 back to your index.html, which is what you're seeing in the console. The success callback fires because technically, it's not a 404 but a 200 OK.
What you're doing should work so long as the Webpack dev server is serving content from the directory immediately above the src folder. I'm guessing that might not be the case.
your browser location is www.google.com/image,and then when you call an ajax the url that request to is www.google.com/image/${url} but if put a slash before your url would be like /src/app.. and the url it would request to is like www.google.com/${url}

Categories

Resources