Cannot get the js file under the static folder in Flask - javascript

It all works in my local server, but when others try to deploy what I have done to the server, it fails.
the file system is the server something like:
SERVER_FOLDER
--homepage
----static
----templates
------404.html
----app.py
----config.py
for example: The server is: MY_SERVER
and then in my app.py, I use
#app.route('/homepage/')
#app.route('/homepage/index')
def index():
# TODO
to define the homepage, and #app.errorhandler(404) to redirect all the not found page to 404.html
So I can get access to my homepage with http://MY_SERVER/homepage/, a little different than my local server. That's one thing that I am confused.
What I think is that the app.py runs under the MY_SERVER rather than MY_SERVER/homepage right?
But, in this way, when I run a template in my template file, and the html template file will use the js file under the static folder. the response always shows the js file is not found.
when I use <script src="{{ url_for('static', filename='file.js') }}"></script>, it shows not found in MY_SERVER/static and return to 404
when I try <script src="../homepage/static/file.js"></script>, same result.
How to handle this?

Build toward your solution:
Get flask serving image files from static
Put an image in the static directory and call it from your browser: http://yoursite/static/some_image_there.jpg
Plug away until that works.
Get flask serving the js file directly to your browser
Now put your js file into static and do as you did for the image.
Plug away until you can call it from the browser:
http://yoursite/static/yourfile.js
get your html to call the js file from static
Now you know that there is no problem actually serving the file, and you know the exact url to it. So it's not a big step to getting the HTML to reference it and your browser to load it.

Related

Only js file per page in laravel

In a Laravel setup using Laravel mix, the mix.js(['resources/js/app.js','resources/js/new-offer.js'], 'public/js') puts everything in one file, app.js.
What I am trying to achieve is to have multiple .js files each for one page. For example. I want to have index.js for my index.blade.php and new-offer.js for my new-offer.blade.php etc ...
The idea is that each page is server side rendered and each page represents a static page comming fromm the server and each one should has it's own set of js files that works in. How this should be done, is it recommended, what are other arhcitectures ?
You can use multiple concatenated .js(...) statements. In your case:
mix.js('resources/js/app.js','public/js').js('resources/js/new-offer.js' ,'public/js')
This will createapp.js and new-offer.js files in your public js folder

How to include a .js file into an html file that is served by a compojure server?

One of my html file needs to include a script file, as it often happens, and no matter what I do, the browser doesn't seem to get it.
following this answer: How to include css files into compojure project?
I created a public folder in my resource folder. The structure looks like this:
resources
|-public
|-views
| |-myview.html
|-scripts
|-my.script.js
Inclusion of the file in myview.html looks like this:
<head>
<script src="/scripts/my.script.js"></script>
</head>
When I request myview.html from the server I get it, but all of the types in my.script.js are unknown. The html works as expected when I just load it in the browser (I have to adjust the path to the script file to be relative, of course, and no, that doesn't work either when I request it from my server).
So how do I get my script files (and later css files) to be found by the html in a typical compojure setup?
Turns out I was just missing
(route/resources "/")
in my routing. As that wasn't the problem with the topic I looked at, I didn't figure it out for a while.
Turns out sometimes you should read the code in the question just as carefully as the answer...

cannot find js file

I have stucture code like this:
I try to load javascript into php file like this:
But i have an error like this:
This is my html :
And this is another javascript:
And i try to copy paste the link, and i got an error 404 not found. How can i fix it? Thanks.
Permissions
When the host is correct, and the file is in the right place, and you have no other networking problems, you may sometimes still get a 404 because of bad file permissions. If a server does not have permission to access a file, it may send out a 404 error in response. The reason why some "Not Authorized" error is not given instead, is that this would reveal more information about the files than you, the owner of the server, may intend. The way to respond to requests for privileged files without revealing whether or not they exist is to give a 404.
On Windows, you can view and change the permissions from the File Explorer by right-clicking on the file or folder, then going to Properties -> Security -> Edit. For more information, see the notes on permissions on Microsoft's site.
File Types
Besides permissions, a server must also be configured to serve the type of file you are accessing. If files with different extensions are served, but .js files are not, check the configuration of your server to make sure that .js files aren't blacklisted (or not whitelisted, as the case may be).
Directory Location
You should also verify that the files are actually stored in the top-most directory of the web server if that's how you are accessing them. If they aren't, you may need to prefix the path with the path from the webserver root to your application directory. E.g., instead of fusioncharts/..., you may need /path/to/fusioncharts/... or ../../path/to/fusioncharts.
Other Considerations
In your particular case, you should also verify that the files inside the fusioncharts folder are actually structured the way you think. (E.g., is there really a js/[insert name here].js file inside the fusioncharts folder?
If none of that solves your problem, try to take something that is working and gradually make it more and more similar to the files that aren't working. By figuring out at which point you go from a working setup to a not working setup, you may discover the problem.
If you are referring to a file with path: /ui/new-file.js
then,
1.In html file include
<script type="text/javascript" src="/ui/new-file.js"></script>
2.In server.js or app.js whichever you have, include
app.get('/ui/new-file.js', function (req, res) {
res.sendFile(path.join(__dirname, 'ui', 'login-file.js'));
});
Assuming you are using codeigniter, you can use base_url() function to include JS files in your codeignitor view template file.
<script src="<?php echo base_url(); ?>fusioncharts/js/fusioncharts.js" type="text/javascript"></script>
codeigniter default view template is called welcome_message.php and this file is located in application/view folder.
This is how I include js files in my codeigniter projects. Hope this will help.
In the html you can write *script** in the head or in the body, but not in your file js, delete this in fusionCharts.js
<script type=text/javascript>
In fusionCharts.js write only the function without the script
If you are developing locally, try clearing your cache.
Google Chrome likes to use the cached JavaScript files instead of the real ones.
Clearing your cache should resolve the issue.

Holder.js in Google Appengine (python)

I want to load a placeholder image using holder.js in a static template. In static template index.html I have:
<img src="/static/holder.js/200x200">
I have handlers set in app.yaml for serving static files in a folder called static, so I know that's not a problem, but for some reason holder.js will not generate the 200x200 image I called for (the log files generate a 404 error). I bet this is some sort of handler issue; perhaps App Engine is treating my request as a directory and cannot find it. I need to configure the app.yaml file so that it treats requests to holder.js as a parameter for the file and not as a subdirectory of the file. Can someone point me in the right direction to help solve this problem?
When using Holder.js, the src attribute isn't meant to be used as a real URI. Instead, it's used as an identifier for Holder.js (specifically the domain option). Your code should look like this: <img src="holder.js/200x200"> or <img data-src="holder.js/200x200">. Make sure to include <script src="/static/holder.js"></script> in the document as well.

Parent Directory '../' going up two directories

I am very confused.
I have been testing a site I am building on one server, and on that server I have a link to a javascript file. On said server I link to the file with '../js/javascript.js' and the file loads properly. On another server I just switched to, if I use the same link the file does not load. I look at firebug and see it seems that '../' is going up two directories and returning a 404 error.
I have fixed the path on the new server, but I am confused about the inconsistency.
I believe it has to do with the fact that I call the javascript in my header.php file, which is in a directory called inc. however the index.php where I include my header.php is in the root directory. But, I don't understand why on one server it references from the root and on the other it references from inside the inc directory.
site/
index.php
js/
javascript.js
inc/
header.php
It does not matter where header.php exists, because it gets included in index.php before the page is delivered to the browser. So any <script src="..."> tags will be relative to index.php. So, your HTML for including the js file should be:
<script src="js/javascript.js">
No ../! Not sure why it worked on the old server, but it definitely won't work on the new one as you've described it.

Categories

Resources