This question is from this thread:
Twitter Typeahead.js with Flask Jinja2 Templating
As suggested, I am trying to separate my js file. Here is the code
$('#search').typeahead({
name: 'Search',
local: {
value: 'String',
tokens: ['Test1','Test2']
language: 'English'
},
template: {{language}},
engine: Hogan
});
I understand what the problem is, but how do I "include" hogan.js? I have installed node.js and I can make it work through that, however, I don't understand how to apply it through flask.
If you are including a static file you can use Flask's url_for.
http://flask.pocoo.org/docs/quickstart/#static-files
Related
I have an issue on which I struggled all day long, I have a VueJS app with vue router that I host on amplify?
everything working great Except that
I need to give a direct access to a file (I want to register an Apple merchant ID with stripe)
I tried to create a route in my route/index.js with my file name that redirect to a component that open the merchantid file with an windows.open('myfile').
it works great on local serve and build but not once deployed through amplify built with webpack
//router/index.js
import WellKnown from '#/components/AppleVerification.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/.well-known/apple-app-site-association',
component: WellKnown,
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
// AppleVerification.vue
<template>
<div></div>
</template>
<script>
export default {
name: 'WellKnown',
props: {
file: String
},
mounted () {
window.open('file:///.well-known/apple-developer-merchantid-domain-association')
}
}
</script>
so I went to amplify console and make a redirection with first priority to the URL and target address to the file. but it didn't work also.
I went out of ideas on how to give access to a file in my sources with a direct URL.
would appreciate a little help
thanks
You issue comes from the acces to the file througth Amplify for several reasons.
Try following:
rename your endfile "apple-developer-merchantid-domain-association"
with an extension like
apple-developer-merchantid-domain-association.txt
remove the dot in your path public/.well-known/apple-developer-merchantid-domain-association to public/well-known/apple-developer-merchantid-domain-association.txt
in your amplify console create a priority 1 rule that redirects your
https://mydomain/.well-known/apple-developer-merchantid-domain-association to
/well-known/apple-developer-merchantid-domain-association.txt with a 202 rexrite method.
It should work
You even didn't need the component anymore
I use 2 entry files, startpage.js and subpage.js, and assign them successfully to their HTML files via the HTMLWebpackPlugins chunks parameter.
But since that solution requires to include the CSS files in both the startpage.js and subpage.js, which makes for "double the trouble" (at least during the build process), I decided to create another file, app_head, and put the import 'main.css' statement there. (And I also have a vendor file that should be placed in the header of the HTML, which should happen by adding _head according to the documentation: https://github.com/architgarg/html-webpack-injector - but that does not work either...)
This is the current webpack config (excerpt):
module.exports = {
entry: {
app_head: './src/css/main.css',
vendor_head: './src/scripts/vendor/_all_vendor.js',
startpage: './src/scripts/startpage.js',
subpage: './src/scripts/subpage.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../public'),
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/templates/index.ejs',
chunks: ['app_head', 'vendor_head', 'startpage'],
chunksConfig: {
defer: ['startpage']
},
excludeChunks: ['subpage'],
bodyCss: 'is-startpage',
}),
new HtmlWebpackPlugin({
filename: 'publication.html',
template: './src/templates/publication.ejs',
chunks: ['subpage'],
chunksConfig: {
defer: ['subpage']
},
excludeChunks: ['startpage'],
bodyCss: 'is-subpage',
}),
[...]
The app_head.css is placed properly in the head section of the HTML, but it also generates a useless app_head.js, which only contains webpack code. Unfortunately, I do not know of any way how to exclude that file without also excluding the CSS.
Is there a better way to separate the CSS generation process without producing overhead or garbage?
The problem is you did not initialized the html-webpack-injector plugin.
// import above
const HtmlWebpackInjector = require('html-webpack-injector');
plugins: [
new HtmlWebpackPlugin(...),
new HtmlWebpackPlugin(...),
new HtmlWebpackInjector() // add this in plugins array
I am using react and django. I am trying to use code-splitting in my components, so in my webpack.config.js I have this
output: {
path: path.join(__dirname, "frontend/static/frontend"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js",
publicPath: "/frontend/static/frontend/"
},
but when it requests it in the browser it goes to
/en/account/quiz/drug-abuse/frontend/static/frontend/2.chunk.js
instead of
static/frontend/2.chunk.js
my javascript files are located in my static folder for django but react routing starts at /en/, I am guessing that is why the confusion is happening.
Is there anyway to make the webpack file look for
http://domainblahblah.com/static/frontend/2,chunk.js
I have Ember App (built with Ember-CLI). On the backend I have Rails application which handles requests. Lets say that my API has following routes:
/model — returns list of models
/model/1 — returns model
/model/1/download — returns file
How can I force Ember app to start file download (using /download path) and how can I construct link for file download from within Ember app?
Why don't you just return the URL path for the download in your model for "/model/1". Then you can easily create links in your handlebars templates like so:
Download File
If you're going to hit the endpoint and return the file contents, I believe you'll need to set the Content Disposition header. More details here: Force download through js or query
Content-disposition=attachment; filename=some.file.name
If you are linking to the file directly, you could use the HTML5 download attribute;
<a href="{{model.download}}" download>Download File</a>
Don't do any of these manually, keep it simple and use ember-cli-file-saver!
// models/invoice.js
export default Model.extend({
invoiceNumber: attr('number'),
download: memberAction({ path: 'download', type: 'GET', ajaxOptions: { arraybuffer: true } })
});
// in a component
invoiceModel
.download()
.then((pdfContent) => this.saveFileAs('invoice.pdf', pdfContent, 'application/pdf'));
This is probably a silly question, but I can't find an obvious response.
I'm developing a web application using (Geo)Django for the backend and Leaflet, among others, for the frontend. My point is I want to make a url call from my JS code to my Django backend. Something like this:
$.ajax({
type: 'POST',
url: '<A_URL_HERE>',
data: {"data":<MY_JSON_DATA>},
dataType: 'json',
success: function(responseData, textStatus, jqXHR) {
console.log("Data saved");
},
error: function (responseData, textStatus, errorThrown) {
console.log("Problem saving the data");
}
});
My problem is with the url. I know that cool URIs don't change, but for example, if I want to keep different dev/test/prod environments without changing that parameter, how should I do it? In the backend part, I'm following good practices for this kind of problems, but I have short experience with JS and frontend.
Many thanks in advance
Two possible solutions:
Use dynamically generated JavaScript, i.e. the JavaScript file is not a hardcoded static file. Instead it is a template which backend populates with variables (in particular URL);
Similar to the one above except that JavaScript is a hardcoded static file and for example you put your URLs in base HTML (which is generated from a template on the server side):
base.html
<script>window.urls = { "my_url": "{{ my_url }}" };</script>
my_script.js
$.ajax({
url: window.urls.my_url,
...
});
With this you can generate URLs based on you server settings.