JS static files issues in AWS Production Django Application [duplicate] - javascript

This question already has answers here:
Unknown Provider e-provider error while using angularjs and ruby on rails
(3 answers)
Closed 5 years ago.
I am having a weird issue where angular is undefined when application is deployed in AWS but locally there are no issues in my angular or javascript code.
Update:
My static files (JS, CSS, Images, etc) all live in an S3 static files bucket. There is no problem in retrieving the files, but it seems like suddenly a working commit that has been deployed for months just started raising JS issues when static files are being loaded.
Here are my JS files in my base template:
{% compress js %}
<script src="{{STATIC_URL}}shared/stacktrace-js/dist/stacktrace.js"></script>
<script src="{{STATIC_URL}}shared/jquery/2.1.1/jquery.min.js"></script>
<script src="{{STATIC_URL}}shared/jquery-growl/1.2.3/jquery.growl.js"></script>
<script src="{{STATIC_URL}}shared/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="{{STATIC_URL}}ckeditor/ckeditor-init.js"></script>
<script src="{{STATIC_URL}}shared/ckeditor-custom/ckeditor-custom.js"></script>
<script src="{{STATIC_URL}}shared/bootstrap/3.3.5/dist/js/bootstrap.min.js"></script>
<script src="{{STATIC_URL}}shared/utils.js"></script>
<script src="{{STATIC_URL}}shared/angular/1.3.11/angular.min.js"></script>
<script src="{{STATIC_URL}}shared/angular/1.3.11/angular-route.min.js"></script>
<script src="{{STATIC_URL}}shared/angular/1.3.11/angular-cookies.min.js"></script>
<script src="{{STATIC_URL}}shared/angular-bootstrap/0.11.0/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="{{STATIC_URL}}shared/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="{{STATIC_URL}}shared/introjs/intro.js"></script>
<script type="text/django" src="{{STATIC_URL}}shared/ch-error-logging.js"></script>
<script type="text/django" src="{{STATIC_URL}}shared/ch-config.js"></script>
<script src="{{STATIC_URL}}shared/angulartics/dist/angulartics.min.js"></script>
<script src="{{STATIC_URL}}shared/angulartics-segment/dist/angulartics-segment.min.js"></script>
<script src="{{STATIC_URL}}shared/chart.js/dist/Chart.min.js"></script>
<script src="{{STATIC_URL}}shared/select2/dist/js/select2.min.js"></script>
<script src="{{STATIC_URL}}shared/angular-chart.js/dist/angular-chart.js"></script>
<script src="{{STATIC_URL}}shared/jquery-validation/dist/jquery.validate.min.js"></script>
<script type="text/django" src="{{STATIC_URL}}shared/ch-track.js"></script>
<script type="text/django" src="{{STATIC_URL}}shared/ch-file.js"></script>
<script src="{{STATIC_URL}}shared/offline.js"></script>
{% endcompress %}
If I change the jquery.min.js to jquery.js inside or outside the compress block, then other JS files begin raising syntax issues. Usually the error in Chrome's console says
Unexpected token (
And in Firefox, the error says
SyntaxError: function statement requires a name

This post helped me figure out which JS files are causing compressed JS errors. Basically, I had issues with directives/controllers construction and by using the ng-strict-di, I found all these issues.
From the AngularJS ngApp documentation. https://docs.angularjs.org/api/ng/directive/ngApp
ngStrictDi (optional) boolean if this attribute is present on the app
element, the injector will be created in "strict-di" mode. This means
that the application will fail to invoke functions which do not use
explicit function annotation (and are thus unsuitable for
minification), as described in the Dependency Injection guide, and
useful debugging info will assist in tracking down the root of these
bugs.

Related

Cannot get js file to execute from html with Flask in PyCharm

I'm trying to get a html page to run a js script from the static files of the host using Flask (as it's a test project it's a localhost) and for some reason every script comes back as a 404 - I'm using this file structure
¬static
¬html
¬user.html
¬js
¬script.js
https://i.stack.imgur.com/vIXzr.png
I've followed as many guides and other queries on fixing this but I don't get what else I'm missing. I've used <script src="js/script.js"></script> to call it, I've used src="{{url_for('static', filename='js/script.js') }}" in place of src="js/script.js, I've tried using just script.js instead of js/script.js, I've tried putting it in different places in the file tree and using as many ways as I can think of to call it from these places, I've downloaded plugins, I looked at official sites explaining how to create html and js and etcetera... Can't get anything to work
EDIT - solved, for some reason clearing my cache for the 2000th time fixed it. Copied the project to another device, same problem, fixed it by replacing js/script.js with static/js/script.js. That doesn't seem like that's how it should be but it works I guess
Static content in Flask loaded as follows:
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
But in this case your html-template should be located in separate folder:
static
--js
scripts.js
templates
user.html
Folder templates is the default place where all html-templates are located in Flask.

Why Javascript doesn't work in my Flask app? [duplicate]

This question already has answers here:
flask does not see change in .js file
(5 answers)
Closed 3 years ago.
I have a problem with Javascript in my app. I'm using Flask and I'm working in PyCharm. My html's are in the template folder and my Javascript is in static folder, so this is external file. It's called main.js.
These are the links to javascript in the html:
<script type="text/javascript" src="/static/main.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='main.py') }}"></script>
I tried both versions and I experienced the same issue with both of them. Both links would actually work for the first load of my page on localhost but every next change in my Javascript main.js file simply just wouldn't get recognized. For instance, I put alert() in main.js just to be sure that the links work, and they worked just fine. But then I deleted alert(), put there some other Javascript code and saved it, but still, this alert() would be active even though I deleted it from the main.js file. And this new code that I put in main.js, it appeared as if it wasn't there at all. So my question is why my main.js file doesn't work?
Am I missing something here? Has anyone experienced this kind of problem in Flask or any other Python (micro)framework?
Your second reference is for a py file, not a js file:
<script type="text/javascript" src="{{ url_for('static', filename='main.py') }}"></script>
When using Flask, the above is a better alternative to full paths, so change it to:
<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
If your browser still doesn't refresh the javascript you should try to Hard Refresh the pages. On Chrome, this is done by pressing CTRLShiftR on a PC or CMDShiftR on a Mac. This should clean your cache and force reload js files.
Finally, if none of these work, you should check on your python code if the headers are being modified for a longer cache. You can 'force' a Flask request to have a shorter cache time by trying to include:
#app.after_request
def add_header(response):
response.cache_control.max_age = 300
return response
You can also try changing Flask app settings for no-cache:
app = Flask(__name__)
...
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
I would also try a different browser and check the network inspect tool (Chrome) to see if the files are being loaded.

How to convert a project's JavaScript loading schema to Browserify?

I would like to refactor a single page web application project to use Browserify as its JavaScript loading schema. I've researched Browserify but there are still things that I don't know how to solve. Allow me to describe the JavaScript loading schema that is used in the project that I want to refactor.
The first script element is inline to the generated HTML. We need that in order to pass Backend configuration to the JavaScript engine. For example:
<script type="text/javascript">
var OUR_COMPANY = {
settings: {
user: '${user}'
}
};
</script>
Then we begin to load JavaScript files from a CDN and local project in an intermixable manner (notice that we use a Backend variables once again to distinguish where the JavaScript file is located):
<!-- resURL means CDN -->
<script type="text/javascript" src="${properties.resURL}/js/jquery/jquery-2.0.3.min.js"></script>
...
<!-- managerURL means local project -->
<script type="text/javascript" src="${properties.managerURL}/js/the_project/grids/InlineEdits.js"></script>
...
<script type="text/javascript" src="${properties.resURL}/js/jquery/plugin/jqgrid/v4.6.0/js/jquery.jqGrid.m1.min.js"></script>
Can somebody please give me an idea on how to convert this project's JavaScript loading schema so as to replace it with Browserify?

How include custom javascript library to google site?

Please, help include custom javascript library "jquery-EmbedPicasaGallery.js" to google site.
I tried 3 methods and always have error:
failed to load external url jquery-EmbedPicasaGallery.js
I tried:
.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BziEumkvYpL6Ql9NRFhET2FXM1E/jquery-EmbedPicasaGallery.js"></script>
.
<script type="text/javascript" src="https://docs.google.com/uc?id=0BziEumkvYpL6ZmlHZ2FWQ1NrVG8"></script>
.
<script type="text/javascript" src="https://docs.google.com/uc?id=0BziEumkvYpL6ZmlHZ2FWQ1NrVG8&export=download"></script>
Have you tried downloading the script and running it from your own server?
Is your site being tested on a server, or locally?
It is common for errors to occur when attempting certain things locally, so make sure to run on a server, especially in cases involving php, ajax, canvas image data, http headers, and cookies, to name a few.

Why can't my site access a linked JavaScript file?

I run a sub-site at my work, and while my live site is on the same "main server" as the company's main site, my dev environment is hosted on a separate server.
For some reason my dev site is unable to access a specific JavaScript file that is hosted on the "main server". All of the other JavaScript files, like jQuery, and jQueryTools can be accessed, but main.js cannot. My only guess would be because it is a custom JavaScript file created by our head web developer, but I don't know why that would make a difference. (Cross-site scripting limitations?)
I link to it just like I do with all the other JavaScript files, right after our main wrapper (it's the 3rd from the bottom):
<script type="text/javascript" src="ui/2009/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ui/2009/js/jquerytools/1.2.2/jquery.tools.min.js"></script>
<script type="text/javascript" src="ui/2009/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="ui/2009/js/main.js"></script>
<script type="text/javascript" src="ui/2009/js/jquery.jgfeed-min.js"></script>
<script type="text/javascript" src="ui/2009/js/hr.js"></script>
To troubleshoot follow these steps:
Check whether the file ui/2009/js/main.js is actually in that
location, if so be sure it doesn't have uppercase characters (the
server OS may be case sensitive)
Check whether the file main.js has the same permissions (i.e. chmod) as the other .js files (e.g. 755)
Check whether the file main.js is actually accessed (how do you know the file is
not accessed from your page in the dev server? It may be accessed but not working because of variable
conflicts with the .js you previously load, for instance). To do so,
you can a) check the server logs and see if you have a "not found"
error referred to the main.js file b) in main.js delete temporarily all
the content and print some simple output (either to screen with
document.write or to the javascript console with console.log)

Categories

Resources