I'm writting a simple video streaming app with Node.js and I'm using the WebChimera plugin. With chimera, the player config is written in QML and I must include it in my .jade page and of course, there's many errors when jade compiles.
Is there a way to include QML in jade?
In your Jade try including an iframe(src='/qmlfiles/my.qml') and create a subfolder called qmlfiles in your /public folder. And then put your qml content in that my.qml file. Express will then see that since qmlfiles is in /public it won't try to interpret it. This is based upon the assumption that .qml has some mime association to it that a browser would understand.
If not, then my.qml might instead just be my.html and it could include QML content. Again, locating it under /public would mean that Express doesn't use the rendering of Jade in order to try to deal with it.
Related
In React I have most of my CSS tied to my modules as follows. Module1.jsx has Module1.css, and so on and so on.
Webpack builds all these modules into a single request via bundle.js.
However, I do have about 40 lines of CSS that I use app wide that does not belong in a single module. In fact some of it targets elements outside of the app, i.e. the body tag.
Currently I have it hard coded in the index.html file which express serves. I could put it in another file and link to it, but his would require another network request.
I would like it in its own file, but then injected into index.html file before it is served.
I'm not sure if webpack can do this, or it can be done via express. But the syntax might look like this:
Instead of this:
<link rel="stylesheet" href="styles.css">
Maybe ssi for server-side-indlcude and the file to include at that location:
<ssi file="styles.css">
It just seems in-efficient to send the index.html to the client, and than for the client to request the CSS, when it can just be sent in the initial request.
In general the reasons for this are:
to clean up index.html and make it more human readable
to follow a separation of concerns design architecture
Ideas on how to do this:
using templates ( is this overkill )
is there a way to implement sever side includes?
does webpack have a way to insert files into file?
can express bundles static files?
Here's the file structure i am using
-----+root
----------+app
--------------+common
--------------+config
--------------+controllers
--------------------------+rootPage.js
----------+public
--------------+rootPage.jade
----------+server.js
Here's my jade file
doctype
html(lang = 'en')
head
title PlanUrNight
meta(charset = 'utf-8')
link(rel = 'stylesheet' href = '//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css')
link(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js' rel = 'stylesheet')
link(rel = 'stylesheet' href = './css/rootPage.css')
body
nav.navbar.navbar-inverse(role= 'navigation')
.navbar-header
button.navbar-toggle.collapsed( type='button', data-toggle='collapse', data-target='#navbar-inverse', aria-expanded='false', aria-controls='navbar')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#') PlanUrNight
.collapse.navbar-collapse#navbar-inverse
ul.nav.navbar-nav
li: a( href="#") Home
.collapse.navbar-collapse.navbar-right
.facebook-login-wrapper
a.btn.btn-primary(href='/auth/facebook') Facebook
span.fa.fa-facebook
.container-fluid
.row
.col-md-8.col-md-offset-2.main-container
.images-container
img.drink(src='img/drinking.png')
img.dance(src='img/couple_dancing.png')
img.club(src='img/club_ball.png')
.row
.col-md-2.col-md-offset-6.search-container
span.glyphicon.glyphicon-search
.input-group
input.form-control(type='text', placeholder='Search')
script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript')
script( src='./controllers/rootPage.js' type='text/javascript')
I have tried multiple variations of the source, but it just doesn't seem to be loading the JavaScript file. Each time I get an error log in my console, saying Error 404: rootPage.js not found
I am using express with node, and in my server.js file I have the following line for serving static files
app.use(express.static(__dirname+'/public'));
So what am I doing wrong here? Does the usage of the app.use line above change the root of my directory in some way so that I need to change the file path to access my JS files?
Or is there a different way to load JS files in Jade?
Your file organization is a bit wonky. Based on the one middleware you showed us, all files in the /public folder will be served as-is, but no static files elsewhere will be.
Generally, jade files that you're rendering with server logic are in a /views folder which is not served directly, but instead available to server side route handlers or controller logic to call res.render with.
So if you have clientside JS files you want to serve as static content you need them either under the /public folder or create more static middleware calls to point to whatever folder they are in.
/** Edit after first two comments **/
Sorry for not providing more examples, etc before, I was on my phone.
Wonky is perhaps a harsh term and I'm sorry. What I meant was it doesn't really match the standard layouts I've seen. There's a few ways to do it, but most small(ish) Express projects at least start out with the template generated by the express command line tool.
In that case, all the stuff in your ./root/app directory would be server-side code that doesn't get directly served to the client ever. Most of the sites I've seen (exception being the default template from the MEAN.js project) follow a pattern something like this:
app
- errors
- models
- controllers
- routes
- views
public
- css
- js
- img
package.json
server.js
Sometimes there's a lib folder that's a peer of app where you put utility stuff. 'views' is where all the jade templates live.
Everything in the public folder is exposed via a single middleware like you did:
app.use(express.static(__dirname+'/public'));
Everything else will not get served as static files. If you have a clientside JS structure that uses an MVC pattern, you'd then have model, view, and controller folders under ./public/js
The MEAN.js folks take a different approach, making each logical component of the app (e.g. user management, etc) into a module and then organizing each module as folders that look like ./<module name>/server and ./<module name>/client with structure for models, controllers, etc, under each of those depending on if it's server code or client code.
You're correct on how to add more more static middleware.
Try
script( src='./app/controllers/rootPage.js' type='text/javascript')
I'm looking into migrating a large, homegrown build script for one of our projects to webpack.
One feature it has is it traverses a /views directory and copies the contents of the html files into a main index.html file. This allows us to easily use KnockoutJS's templating feature without putting everything in one file ourselves. Something like this:
for relative_path, full_path in walk(os.path.join(base, "views")):
with open(full_path) as f:
index.append("""<script type="text/html" id="{0}">""".format(relative_path))
index.extend(f)
index.append("</script>")
Ideally, I'd like to be able to do something like require('./views') and have it embed each .html file as <script type="text/html" id="views/foo">...</script>, injecting the text into the script tag and setting the id to the filepath. We have almost 100 different templates, so I'd like to avoid require()ing them individually.
Can I configure html-loader or html-webpack-plugin to do this? I'm wondering if I'll have to write my own webpack plugin or if there's a way I can configure an existing plugin to do what I want.
Thanks!
I think you can accomplish this using require.context and the html loader.
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
// requires and returns html files in the views directory
var modules = requireAll(require.context("./views", true, /^\.html$/));
modules.forEach(function(htmlTemplate){
// code to add each template to document.body
}
I just want to ask how to use the jquery custom builder since i separate the folder of jquery custom builder to the Login Folder. Here is the folder path for the jquery custom builder
And here is for the Login Folder
I have tried this kind of syntax for getting the Directory of the js file and to other files to but it doesn't seems to work.
<script src = "../htdocs/WebSite/jslib/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
i hope you can help me with this since i'm just starting jquery i also read the guide for using jquery i follow the instruction but it's still the same.
Thanks
Where is the html file that imports jquery script tag? It seems like just path problem. Usually, URI paths are based on app server root. There are so many ways managing URI, but XAMPP might let file resource paths show up same as URI paths.
When app server root is located on c:/foo/bar/:
c:/foo/bar/lib/jquery.js -> http://localhost:xxxx/lib/jquery.js
c:/foo/bar/index.html -> http://localhost:xxxx/index.html
So in index.html, import resource as this way.
<script src="lib/jquery.js"></script>
I'm new to derbyjs and I want to know where I can put my client js file in derbyjs ?
Can I place it into the /public/js folder ? or in components folder /ui ?
Thanks :)
If you mean static files (for example bootstrap's css and js files), you often put these into the /public folder - I think they are served from here by default, but it might have been changed.
For further reference you can see https://github.com/codeparty/derby-starter/blob/master/lib/server.js#L47 where a folder is specified for serving static files. Instead of expressApp.use(express.static(options.static)) you could probably use something like expressApp.use(express.static(__dirname + '/yourstaticfolder')) instead.
The ui folder is basically an example of how a component can be included and used in your application.