I am using webapp2 to build a webapp with angularjs. This is the directory structure.
|--test-app
|--lib
|--static
|--js
|--app.js
|--controller.js
|--lib
|--angular
|--angualr-bootstrap
|--index.html
|--app.yaml
|--mainapp.py
But when I try to load the js files in index.html
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<script src="/static/js/app.js"></script>
<script type="text/javascript" src="/static/js/controller.js"></script>
</head>
<body>
<div ng-controller="MainController">
IN MAIN
</div>
</body>
</html>
I get these errors:
GET http://localhost:8080/static/js/app.js (404 - file not found)
GET http://localhost:8080/static/js/controller.js (404 - file not found)
I cannot figure out why I am getting these errors.
Here is code for app.yaml
application: test-app
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /.*
script: mainapp.app
libraries:
- name: webapp2
version: "2.5.2"
Here is code for mainapp.py
class Start(webapp2.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'text/html'
self.response.write(open('static/index.html').read())
app = webapp2.WSGIApplication([
('/', Start),
], debug=True)
You must explicitly declare the location of your static content in app.yaml:
handlers:
- url: /static
static_dir: static
handlers:
- url: /.*
script: mainapp.app
See docs for details:
Unlike a traditional web hosting environment, Google App Engine does not serve files directly out of your application’s source directory unless configured to do so.
URL handler path patterns are tested in the order they appear in app.yaml, from top to bottom. In this case, the /static pattern will match before the /.* pattern will for the appropriate paths.
I moved the index.html out of the static folder and then declared explicitly the static url, as said by #Selcuk. And it works nows.
Related
i am running javascript frontend with django backend.
Here is the structure
-app
--templates
---index.html
--static
---index.js
---haarcascade_frontalface_alt.xml
---style.css
--views.py
--urls.py
I can see css style in my index.html page. But the index.js file is unable to pick haarcascade_frontalface_alt.xml.
The code is as follow
const HAARCASCADE_URI = "haarcascade_frontalface_alt.xml"
this.classifier = new cv.CascadeClassifier();
let faceCascadeFile = "haarcascade_frontalface_alt.xml";
if (!this.classifier.load(faceCascadeFile)) {
await this.createFileFromUrl(faceCascadeFile, this.classifierPath);
this.classifier.load(faceCascadeFile)
}
but it say
Failed to load haarcascade_frontalface_alt.xml status: 404
I am using express and node.js in backend and ejs templating engine in front-end. My app.js look like this
app.get('/book/:id', (req, res)=>{
var book_id = req.params.id;
console.log('this book :', book_id);
Book.findOne({
book_id
}).then((book)=>{
res.render('book.ejs', {book, title: "Book"});
}).catch((e)=>{
// console.log(e);
});
});
book.ejs file
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="books.js"></script>
</head>
<body style="font-family: arial">
<h1><%= title %></h1>
</body>
</html>
But when i route page to book/1234, I got following log in my server
this book : 1234
this book : jquery-3.3.1.min.js
this book : book.js
Why jquery-3.3.1.min.js and book.js are send to book/:id route? I am only sending book/1234 but jquery-3.3.1.min.js and book.js are also sent to server and causing error.
Browser console log is this
GET http://localhost:3000/book/jquery-3.3.1.min.js net::ERR_ABORTED 500 (Internal Server Error)
1234:1 Refused to execute script from 'http://localhost:3000/book/jquery-3.3.1.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
1234:6 GET http://localhost:3000/book/books.js net::ERR_ABORTED 500 (Internal Server Error)
1234:1 Refused to execute script from 'http://localhost:3000/book/books.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Since script links have relative paths, they are loaded from current path, which is /book.
They should either have absolute paths:
<script type="text/javascript" src="/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/books.js"></script>
Or base URL should be specified:
<base href="/">
You are using relative path in src attribute. Since you are serving the page from /books/<id>, if you use a relative path, browser will understand it as /books/(relative_path_of_resource) and so when it comes across those links it is sending a request to books/jquery.js and books/books.js
You should convert your link to point to the correct static path of the js files. Refer this link - https://expressjs.com/en/starter/static-files.html to see how to serve static files and once you set up the serving, you can change the links to /static/books.js and /static/jquery.js
I think that your book.ejs file is under the route of '/book'. if that so, you script tag like <script type="text/javascript" src="books.js"></script> will access the route of /book/book.js ,not your assets.
so you should set you src attribute like this /book.js and make sure you had made your assets accessible.
I have a static website and i'm working with GAE when i deploy my website some pictures are not being upload.
How can i fix this problem
Console Message :
Some files were skipped. Pass `--verbosity=info` to see which ones.
You may also view the gcloud log file, found at
[C:\Users\Maher\AppData\Roaming\gcloud\logs\2017.06.22\13.28.54.036000.log].
this is my app.yaml
runtime: php55
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: www/index.html
upload: www/index.html
- url: /(.*)
static_files: www/\1
upload: www/(.*)
Folder Tree :
>Website
>www
>css
>fonts
>img
>photos
pic_1.jpg
pic_2.jpg
...
>js
blog_post.html
photos.html
index.html
app.yaml
Put all your static files in one dir say assets -> css, fonts, img, js.
Then specify it as a static directory
- url: /assets
static_dir: assets
expiration: "1h"
http_headers:
Vary: Accept-Encoding
I have a Spring boot application. I have 406 Not Acceptable on angular.min.js file if this file is in subdirectory (angular).
200 OK:
<script type="text/javascript" src="../js/angular.min.js"></script>
/src/main/webapp/js/angular.min.js
but 406 Not Acceptable:
<script type="text/javascript" src="../js/angular/angular.min.js"></script>
/src/main/webapp/js/angular/angular.min.js
I solve my problem.
I added a REST service with a path that matches was my angularjs src way. :(
#RequestMapping(value = "/{code}/{width}/{height}", method = RequestMethod.GET, produces = MediaType.IMAGE_PNG_VALUE)
SOLUTION: value = "/api/{code}/{width}/{height}"
I have a strange problem with System JS when I'm playing around with Angular 2.
Everything works fine for a while, but seemingly random System JS can't find modules anymore...
I get this error message:
GET http://localhost:9000/angular2/platform/browser.js 404 (Not Found) # system.src.js:4891(anonymous function) # system.src.js:4891
GET http://localhost:9000/angular2/core.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/router.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/http.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/core.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/http.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/src/facade/lang.js 404 (Not Found) # system.src.js:4891
GET http://localhost:9000/angular2/router.js 404 (Not Found) # system.src.js:4891
Sometimes it's more sometimes it's less errors...
The strangest thing is that after waiting a while and trying to refresh the page over and over, the app magically starts working again!
I use systemjs#0.19.20 and angular2#2.0.0-beta.3 (latest at the time).
Script section of index.html with SystemJS config look like this:
<script src="./node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="./node_modules/es6-shim/es6-shim.min.js"></script>
<script src="./node_modules/systemjs/dist/system.js"></script>
<script>
//configure system loader
System.config({
defaultJSExtensions: true
});
//bootstrap the Angular2 application
System.import('dist/app').catch(console.log.bind(console));
</script>
<script src="./node_modules/rxjs/bundles/Rx.js"></script>
<script src="./node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="./node_modules/angular2/bundles/http.dev.js"></script>
<script src="./node_modules/angular2/bundles/router.dev.js"></script>
Anyone recognize this problem?
Thanks!
It seems that your SystemJS isn't correct:
Do you use something like that in your HTML entry page:
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
From what I see in your HTTP calls, I guess that there is something like that in your SystemJS configuration:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
angular2: {
format: 'register',
defaultExtension: 'js'
}
}
});
Maybe a long shot as I don't have the enough privileges to comment and ask for more information. Did you try checking if the file app.ts actually resides in dist/app?