I'm working on my first Vue app, which uses the Moment library and Firebase (if that matters). I use default Webpack simple. To deploy the app I did npm run build.
But when opening directly index.html (the app is deployed here) I get "Failed to load resource: the server responded with a status of 404 (Not Found)" error message and the app doesn't work at all as a result.
I have no idea how to troubleshoot this issue since there's no more information that this in DevTools...
Any idea about what I can do next?
App source code
Remove the first forward slashes of all your assets path.
It should fix your problem.
<script src="/dist/build.js"></script> // No!
<script src="dist/build.js"></script> // Yes!
Vue adds it by default during the build process, in order to make your assets relative to the root folder.
Related
I've gone through several Stack Overflow pages and the official Vue guide, but my app still returns 404 results when going to a different page.
The structure of my app looks like this, with a client folder that has the Vue app and a server folder containing app.py that statically serves the index.html in the client/dist folder through Flask.
Contents of static.json are as outlined in the guide:
{
"root": "client/dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
with just modified root folder to go to client/dist. Running the app locally with npm run serve works, as does opening it up on its Heroku page and clicking on the nav. However, directly going to a page, such as /translate, always returns 404.
I have installed the following buildpacks:
=== readiglot Buildpack URLs
1. heroku/nodejs
2. heroku/python
3. https://github.com/heroku/heroku-buildpack-static
The app is hosted here: https://www.readiglot.herokuapp.com.
On npm run build from the root directory, the dist folder is built by Heroku in the client folder.
Am I missing something? Could anyone advise as to additional configuration?
The answer is in the app.py file - you need to statically serve the file using a catch all route.
#app.route("/", defaults={"path": ""})
#app.route("/<string:path>")
#app.route("/<path:path>")
def index(path):
return app.send_static_file("index.html")
By putting the serve_static_file in the Flask app to redirect from all other routes, 404 only shows up on a true 404.
I have had no problems with deploying my vue projects so far and uploading it to my website. However suddenly Im getting the following errormessage after I have been running
npm run build
and uploading the files in my distfolder.
Uncaught SyntaxError: Unexpected token '<' chunk-vendors.468a5298.js:1
Uncaught SyntaxError: Unexpected token
'<' app.f775d578.js:1
The only difference I can notice is that vue now seems to recommend using yarn.
I made a new project just for testing using yarn but with the same error.
vue create my-application
yarn install
yarn serve
yarn build
uploading content in distfolder to my website - same errormessage
Anyone else experienced this?
My old build works without any problems
Im using #vue/cli 4.5.6
I got it working now. Deleted the folder on my ftp and created a new one. Dont know this solved it but it did :)
If you are deploying your dist not to your root of the web, then one possible cause of this is an incorrect static assets path. Make sure both your css and js generated from npm run build are imported to the correct path from your web server
On dist/index.html, you will see something like this
<link href=/js/chunk-....js rel=prefetch>
This means that it's an absolute path (root of the web), when it's supposed to be relative from the dist folder like this:
<link href=js/chunk-....js rel=prefetch>
To easily fix this is, add publicPath key in your vue.config.js file:
module.exports = {
...
publicPath: ""
};
Then rebuild the project.
I'm using service worker and caching with workbox using webpack for a vuejs app. While it worked fine until now, when I pushed new changes to our app, the app breaks after reloading the page and gives this error. Also, in the network tab, I see that it is requesting a non-existing app.js build file which was a previous deploy file. How do I solve this?
If you observe the image, you can see that the request is going to older app.js file while in the dist folder to the left, the hash of app.js bundled is different.
error image
tldr;
My project is an NPM module that is used by an ExpressJS server. The server needs to specify an endpoint and my module will do the rest. How do I get my module to load the correct html page and grab the correct js/css files from the correct path?
The Problem
I'm running into a problem where I can see the directory structure of the site, using the serveIndex library, and all the files are in their correct directories but for some reason when I try to load any of the files, whether from the serveIndex view or from the actual endpoint where it should load, I get nothing but 404 errors.
Here's an example if someone wanted to use this NPM module from their project.
app.js (their server)
const express = require('express')
const { adminAreaConfig } = require('express-admin-area')
const app = express()
const adminArea = adminAreaConfig(express) // my module being passed the "express" library
app.use('/admin', adminArea) // specify a URL to use my module
app.listen(3000, () => console.log('\n\nServer Online\n\n'))
Here's an image of my projects dir structure after it's been built.
Going off of a console.log(__dirname), which returns <long path string>/express-admin-area/build/src, I then tell my module, using the express reference passed by the actual server in the code above, to look in the views directory with
... import libraries etc ...
const adminAreaConfig = express => {
const adminArea = express.Router()
adminArea.use('/', express.static(__dirname + '/views') // sets my modules views to the "http://localhost:3000/admin" path
adminArea.use('/dirs', serveIndex(__dirname)) // will get into this later
... some other stuff like exports etc ...
This then attempts to load the index.html file in the express-admin-area/build/src/views directory but fails because it can't locate the CSS and JS files inside express-admin-area/build/src/views/static/css or .../js.
First, I know it fails because instead of looking for http://localhost:3000/admin/static/css/styles.css it looks for http://localhost:3000/static/css/styles.css, so that's another problem I need to solve entirely.
Second, looking back at the small code sample above, adminArea.use('/dirs', serveIndex(__dirname)), I'm using the serveIndex library in an attempt to view the directory structure. If I go to http://localhost:3000/admin/dirs I get the correct directories and files in the browser
But now, if I try to view an actual file I'm met with the error Cannot GET /admin/dir/main.js for example if I were to go to http://localhost:3000/admin/dir/main.js, but I can continue going deeper in the directories if I wanted such as the controllers or routes directories from the image.
What I want
I need a way to get these static assets to load. If I point my module to a basic html page with a simple <h1>Hello, World!</h1> then that's what Ill get but trying to load any outside scripts/stylesheets is when I get the 404 errors and nothing loads.
I'll be answering my own question.
The solution is actually pretty simple. The view layer of this module is handled by React, CRA to be specific. CRA will look for some specific environment variables, one of them being PUBLIC_URL. All I had to do was
Create a .env file in the root directory of my CRA
add PUBLIC_URL="/admin"
Afterward, it's just rebuilding the project, yarn build, and reset the server. CRA will then look at http://localhost:3000/admin/static/... instead of http://localhost:3000/static/... for static assets.
I have a angular 2 SPA running from within a SharePoint 2010 document library. However, I have a problem with routing. When I start the application by running "index.html", the link in the browser shortly displays:
<server>/scripts/angular_app/index.html
When the application is loaded it changes to:
<server>/scripts/angular_app/#/information-system
'information-system' is the default route of my application.
So far, so good.
If I do a reload of the page now, SharePoint loads its default view:
<server>/scripts/angular_app/Forms/AllItems.aspx
This is because the routing removes the 'Index.html' from the url and SharePoint loads the default which is 'AllItems.aspx' and not 'index.html'.
Is there any way of telling the angular 2 routing system to leave the 'index.html' bit in the url?
Thanks for any help!
Joachim
I added following line to index.html to keep index.html in the URL all the time:
<base href="/index.html">
I solved my issue by extending the base href with the filename at compile time:
ng build --dev --bh /scripts/filingangular/index.html
I was not aware that you could put an actual filename here.