I'm using Django 1.9, React and webpack, I used externals to load the django I18n functions such as gettext in my javascript files.
This is loaded like this from a view :
<script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}/0"></script>
Here is my webpack config :
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery",
"utils": "utils",
"gettext":"gettext",
"django":"django",//I18n functions are encapsulated in the django object
},
In my jsx files I load gettext like this :
import {gettext, interpolate, ngettext} from 'django'
render(){
var login_header_text = gettext("blablabla.");
....
Actually almost everything works, when I use django-admin makemessages -d djangojs -l it recovers many gettext, however some gettext are ignored by the script so sometime I have to put the gettext at the beginning of my render function and then it works..., I don't know why this is happening.
In the end with my technic I can make it work totally but maybe I did something wrong. Maybe I should generate mo file with grunt and load it dynamically with po loader with webpack because I will need soon to load them dyamically into the page.
Maybe you can guide me a bit ? Thanks
Related
ES6 modules are easy enough to leverage, however I am struggling with how to get them to work in both dev and prod. In dev, they're stored in Django's static folder, which means I can import them like this:
import { buildTable } from './customTable.js';
And in the html templates:
<script type="module">
import { buildTable } from '../../static/customTable.js'
example('hello world')
</script>
However, in prod, the static folder is on a different webserver, so these paths wont be the same. What is the best way to get these modules to load both in dev and prod?
The solution is to use Django template syntax to import the js modules:
import { example } from '{% static "test.js" %}'
I'm running into issues with Flask caching my bundle.js file despite setting app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0 when I'm running webpack in watch mode, so I've decided to add a build version to my bundle.js in an effort to break the browser cache.
Presently, I have:
<script src="{{url_for('static', filename='bundle.js')}}"></script>
in my html file and I'll need to add a variable to it. The problem is I don't know what the version will be, so is there a way to grab the file name in flask, and send it in with my render_template? I imagine something like: <script src="{{url_for('static', filename='bundle{}.js'.format(version))}}"></script>
and then grabbing the version from app.py by looking in the static folder for a file that begins with bundle, has an integer, and ends with .js
In your app.py file:
app.jinja_env.globals['js_bundle_file'] = 'bundle-1.1.js'
In your template:
<script src="{{url_for('static', filename=js_bundle_file)}}"></script>
Instead of hardcoding your bundle file, you could also look for it using a slightly hacky list comprehension:
app.jinja_env.globals['js_bundle_file'] = [f for f in os.listdir('static') if f.endswith('.js') and f.startswith('bundle')][0]
or this cleaner looking glob:
import glob
app.jinja_env.globals['js_bundle_file'] = glob.glob('static/bundle*.js')[0]
The problem is that my index.html won't load a css file from a sister folder. I've tried a variety of Browsersync options and none worked.
Into my second day trying to figure this out. I'm working in the Flask framework for Python which works something like Laravel, etc. My task manager is Gulp, front end framework is Foundation 6. I'm new to Flask and Gulp. I used to use Grunt and Livereload with Laravel some years ago and had scss and browser reload working then. Memory fades though.
My file structure is supposed to be typical Flask, just the relevant folders here:
-root
-app
-static
-css
-js
-templates (html files)
-foundation (scss files and framework)
Browsersync seems to be designed so you have to have css under the html files. I've tested this with an index.html in the /root and /app folders and it works. However, I need / want the html in /templates.
In /app/templates/index.html:
<link rel="stylesheet" href="../static/css/app.css">
I'm using both command line for Browsersync and Gulp.js files in the root and in /foundation.
The Browsersync server will serve html from /templates if I set it up with "app/templates" but then it can't find the css. If I move /static/css into /templates the proper index.html file is rendered nicely in the browser. So Browsersync works with the old pre-app framework layout. It just can't deal with paths to sister folders.
gulp.task('serve', ['scss'], function() {
browserSync({
server: "app"
});
gulp.watch(src.css, ['scss']);
gulp.watch(src.html).on('change', reload);
});
I've considered their proxy option but so far can't find a solution with that. I haven't found many setup examples online and none were useful.
For now I'm just doing desktop layout of the app's html pages with Foundation 6 and haven't set up a dev server, just a folder on my MBP.
Any ideas? Please :-)
You can provide multiple base directories from which to serve static files
server: {
baseDir: ["app/templates", "static"]
}
this will server app/templates/index.html by default and then in your html just use
<link rel="stylesheet" href="/css/app.css">
This is my final working gulpfile.js in the site root and setup to work with Flask or most other application frameworks plus Foundation 6. Hope this example saves someone a day or more of figuring this out. I'll add js files later.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var reload = browserSync.reload;
var src = {
scss: 'foundation/scss/*.scss',
css: 'app/static/css/app.css',
allscss: 'foundation/scss/**/*.scss',
cssdest: 'app/static/css',
html: 'app/templates/*.html'
};
var sassPaths = [
'foundation/bower_components/foundation-sites/scss'
//'foundation/bower_components/motion-ui/src'
];
gulp.task('serve', ['sass'], function() {
browserSync({
open: false,
server: {
baseDir: ["app/templates", "app/static"]
}
});
gulp.watch([src.scss, src.allscss], ['sass'])
gulp.watch(src.html).on('change', reload);
gulp.watch(src.css).on('change', reload);
});
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe($.sass({
includePaths: sassPaths
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest(src.cssdest))
});
gulp.task('default', ['serve']);
I have a strange django error, that i would you to help me please.
The error occurs when I try to load django templates.
I work with Sencha ver 5.1.1 and Django ver 1.8.2.
When I try to load index.html, a file created by Sencha Cmd file without django (directly), with hard path like this:
<script id="microloader"
type="application/javascript"
src="/frontend/extjs/bootstrap.js">
</script>
It works as excepted.
But, if I load index.html with django with as a templates who look like this:
{% load staticfiles %}
<script id="microloader"
type="application/javascript"
src="{% static "bootstrap.js" %}">
</script>
On firefox it show the following error :
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
manifest = Ext.manifest = JSON.parse(result.content);
bootstrap.js col:50 line 1513
Does anyone have any solution?
it is appear that firefox CAN NOT run with out web security as chrome does.
Because of that all my testing was unable to run and fail.
If you running test inside your lab you may want to use chrome as the
following :
"chrome --disable-web-security"
Please note , this ONLY FOR TESTING !!!! not for production.
After I realize that my django finally run as expected and load the index.html as a templates as i need.
Thank all for all your effort to help
I have a Bootstrap theme from https://wrapbootstrap.com/ that I want to use in my MeteorJS application. The issue is it has script tags like:
<!--[if !lte IE 6]><!-->
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script>
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
<!--[if lt IE 9]>
<script src="js/include/selectivizr.min.js"></script>
<![endif]-->
<script src="js/libs/jquery.ui.touch-punch.min.js"></script> <!-- REQUIRED: A small hack that enables the use of touch events on mobile -->
which don't work when added to MeteorJS. I know tags don't work, but how would you acoomodate this designed page to MeteorJS?
Later edit:
I added the script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> above. All the above scripts are added in the <body>. The google.maps library is used in lib/main.js and it doesn't work with MeteorJS because it raises ReferenceError. Outside of Meteor it works fine.
Any ideas on how to add that Google Maps script from the Bootstrap Template?
Later edit:
The Bootstrap template has a lib/main.js file which is the last javascript file imported. Nevertheless, when I add it to Meteor, it seems to be run, but its effects are not seen in UI. For example, it executes this line $(".chzn-select").select2(); but only when I execute it from the Console I can see the UI changes. This file is loaded last by Meteor. I also tried with
function load_scripts() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "lib/main.js";
document.body.appendChild(script);
}
if (Meteor.is_client) {
window.onload = load_scripts;
}
with no success.
These external themes might not be compatible with the default bootstrap included with meteor, so you should remove meteor's bootstrap package:
Remove default bootstrap:
meteor remove bootstrap
Add your theme:
Place your css files in your project's css directory, say /client/css
Place the themes javascript files in /client/lib
Don't worry about the script tags, or linking any of them or anything, meteor should take care of all of that.
Also
Meteor includes JQuery by default so you don't have to worry about including it in your project. To add jquery if for some odd reason you're meteor project might not have it use:
meteor add jquery
External Apis
e.g FB/Google Mapis API/Tracking scripts. Add them in the <head> section of your html file as normal.
Hopefully you find all of this cool!!