Sublime Forum

Index.jade isn't running in web browser: It just shows the code in file

#1

Why won’t my web browser run any code but HTML? I’ve downloaded both the Jade Package in Install Package and View in Browser, and the process to take the code and run it in a web browser works just fine but all I see in the web browser is the code I typed and not what I expect everyone to see when they view the webpage.

This is what shows up in the console after I run it.
“Created new window in existing browser session.
[Finished in 0.3s]”

All went well, just not the execution.
Also, I’m using Ubuntu and am running it using Chrome and have also tried Firefox, both of which produced the same result. I am using Sublime Text 2.

Any solutions?

0 Likes

#2

The entirety of my knowledge about Jade is what I just gleaned from a Google search, so take this advice with a grain of salt:

Jade is designed primarily for server side templating in node.js, however it can be used in many other environments.

This sounds very much like the kind of language for which you run your .jade file (e.g. index.jade) through a program written in node.js, out of which will fall an index.html file which would can then view in a browser.

Or if you will, the browser only knows how to render HTML and display text and Sublime is just telling the browser to view the file, so you get to see the jade code because it’s not HTML and so it’s treated as text.

It looks like you probably also want the Jade Build package, which sounds like it includes the functionality for doing the conversion for you. The plugin’s author also recommends that you use this with the Jade package you have probably already installed as well as the SublimeOnSave plugin that will run the build every time you save the file so you don’t have to do it manually all the time.

0 Likes

#3

As I had already stated, I have already downloaded the Jade Package in Install Package. It still does not work.

0 Likes

#4

The Jade package and the Jade Build package are two different things. The first one purports to support syntax highlighting for the Jade language while the second one specifically mentions using the node.js jade tool to do your builds.

If you actually did install Jade Build and not Jade, then the problem is probably something to do with your node.js installation.

0 Likes

#5

Yes, by that I mean I have already downloaded Jade Build.

When I specifically set the Build System to Jade and try running the jade file, I get the following set of errors:

jade:/home/gewurztraminer/workspace/morpheme/site/public/index.jade:1:0:E: character “i” not allowed in prolog
jade:E: cannot find “–pretty”; tried “–pretty”, “/usr/local/share/sgml/–pretty”, “/usr/share/sgml/–pretty”
jade:/home/gewurztraminer/workspace/morpheme/site/public/index.jade:13:13:E: end of document in prolog
jade:E: cannot find “–pretty.dsl”; tried “–pretty.dsl”, “/usr/local/share/sgml/–pretty.dsl”, “/usr/share/sgml/–pretty.dsl”
jade:E: specification document does not have the DSSSL architecture as a base architecture
[Finished in 0.0s with exit code 1]

where the “i” indicated appears to be the first letter typed in the file.

Is this at all relevant to the reason why It won’t display in web browser?

When I try running a simple function of JavaScript which alerts “hello”, I still see the text of the code and not the alert. I don’t think it matters what language I use apart from HTML.

0 Likes

#6

Those errors are definitely why things are not working. In the interests of helping you figure out the problem I did this:

  1. invoke npm install -g jade
  2. Install the Jade and Jade Build packages as listed above
  3. Snag the code that you see when you go to http://jade-lang.com and save it as ~/index.jade

First thing to notice is that jade has been renamed to pug for copyright reasons. The jade that is falling out of this process may or may not be the most current one. However my initial efforts at installing pug didn’t end up with a binary and I’m not a huge fan of node.js in particular so I let that slide. There may be some more work for the package maintainers on the sublime packages to do, though.

Secondly, the build system was not automatically picked up and it has to be set manually. This is due to the fact that the syntax uses text.jade for the source selector, but the build system is set to trigger for source.jade; thus you need to select the build system manually.

Thirdly, on build, I get errors as you did above:

jade:/home/tmartin/index.jade:1:0:E: character "d" not allowed in prolog
jade:/home/tmartin/index.jade:14:6:E: character "e" not allowed in prolog
jade:E: cannot find "--pretty"; tried "--pretty", "/usr/share/sgml/--pretty"
jade:/home/tmartin/index.jade:20:30:E: end of document in prolog
jade:E: cannot find "--pretty.dsl"; tried "--pretty.dsl", "/usr/share/sgml/--pretty.dsl"
jade:E: specification document does not have the DSSSL architecture as a base architecture
[Finished in 0.0s with exit code 1]

Everything I’ve read seems to indicate that this should just work so I did some more digging around and discovered this:

tmartin:dart:~> which jade
/usr/bin/jade

tmartin:dart:~> ls -alF `which jade`
lrwxrwxrwx 1 root root 8 Jul 28 15:43 /usr/bin/jade -> openjade*

Of all of the things that I expect to fall out of node.js when I run an install as my own user, a binary with a completely different name stored in /usr/bin is not one of them. It turns out that my Linux box (and probably yours as well?) has a version of OpenJade installed, which works almost but not quite entirely as the one in node does.

When that symlink is not in place, everything works as expected and the file builds:


  rendered /home/tmartin/index.html
[Finished in 0.4s]

I happen to know that my node.js install dropped the jade binary in /home/tmartin/local/nodejs/bin, so using PackageResourceViewer I opened Jade.sublime-build from the Jade Build package, modified it to look like the below, and saved it:

{
    "cmd": ["jade", "$file", "--pretty"],
    "selector": "text.jade",
    "linux": {"path": "/home/tmartin/local/nodejs/bin:$PATH"},
    "osx": {"path": "/usr/local/bin:$PATH"},
    "windows": {"shell": "true"}
}

The parts changed here are the selector changed to the source selector that the Jade package provides for the syntax (so that the build system will be automatically detected) and the addition of the linux line to set the path so that my nodejs binary path is ahead of everything else to make sure the right jade gets found first.

NOTE: If you do what I did above to fix this, you are overriding the build file in the Jade build package with your own. In the event that the package is updated (e.g. to use pug instead as appropriate) your override will still be seen and you will thus not get any “officially blessed” changes.

You can get around this by saving the file as e.g. Packages/User/MyJade.sublime-build instead. That will make the build system appear in the menu as MyJade (it’s based on the file name) but it will still get automatically selected over the other one due to the selector change. You would then be free to explicitly set the official build if you ever needed to use it.

0 Likes

#7

When I enter -alF which jade in the console, I get a different return:
-rwxr-xr-x 1 root root 690448 Apr 5 07:34 /usr/bin/jade*

Unfortunately, this did not work for me. Might this be the result of having a different directory to put in place of “/home/gewurztraminer/local/nodejs/bin:$PATH”? I do not have a folder titled “local” in /home/gewurztraminer. It’s worth mentioning that I searched for all folders titled “nodejs” in my computer and none of them have another folder in them titled “bin”.

I not only still have the problem when I try to run my Jade code in the web browser of seeing just my code in the browser but also the same error when I build with MyJade as my Build System.

jade:/home/gewurztraminer/workspace/morpheme/site/public/example-page/index.jade:2:0:E: character “/” not allowed in prolog
jade:/home/gewurztraminer/workspace/morpheme/site/public/example-page/index.jade:6:0:E: character “i” not allowed in prolog
jade:/home/gewurztraminer/workspace/morpheme/site/public/example-page/index.jade:18:2:E: character “i” not allowed in prolog
jade:E: cannot find “–pretty”; tried “–pretty”, “/usr/local/share/sgml/–pretty”, “/usr/share/sgml/–pretty”
jade:/home/gewurztraminer/workspace/morpheme/site/public/example-page/index.jade:20:12:E: end of document in prolog
jade:E: cannot find “–pretty.dsl”; tried “–pretty.dsl”, “/usr/local/share/sgml/–pretty.dsl”, “/usr/share/sgml/–pretty.dsl”
jade:E: specification document does not have the DSSSL architecture as a base architecture
[Finished in 0.0s with exit code 1]

0 Likes

#8

Possibly; it’s been a long time since I installed npm so I don’t remember if I told it that location or what.

You might try something like the following. For me the npm binary is stored in the same location as the links to the installed binaries, so if that’s the case that would point out where to look for them.

tmartin:dart:~/local/nodejs/bin> cd
tmartin:dart:~> which npm
/home/tmartin/local/nodejs/bin/npm

tmartin:dart:~> ls -alF /home/tmartin/local/nodejs/bin/
total 22116
drwxrwxr-x 2 tmartin users     4096 Jul 28 15:47 ./
drwxrwxr-x 7 tmartin users     4096 Nov 23  2015 ../
lrwxrwxrwx 1 tmartin users       35 Nov 23  2015 bower -> ../lib/node_modules/bower/bin/bower*
lrwxrwxrwx 1 tmartin users       36 Jul 28 15:47 jade -> ../lib/node_modules/pug-cli/index.js*
lrwxrwxrwx 1 tmartin users       27 Nov 23  2015 n -> ../lib/node_modules/n/bin/n*
lrwxrwxrwx 1 tmartin users       59 Nov 23  2015 ncu -> ../lib/node_modules/npm-check-updates/bin/npm-check-updates*
-rwxrwxr-x 1 tmartin users 22607301 Nov  3  2015 node*
lrwxrwxrwx 1 tmartin users       44 Nov 29  2015 node-gyp -> ../lib/node_modules/node-gyp/bin/node-gyp.js*
lrwxrwxrwx 1 tmartin users       38 Nov  3  2015 npm -> ../lib/node_modules/npm/bin/npm-cli.js*
lrwxrwxrwx 1 tmartin users       51 Nov 23  2015 npm-check-updates -> ../lib/node_modules/npm-check-updates/bin/old-alias*
lrwxrwxrwx 1 tmartin users       38 Mar 25 20:48 tsc -> ../lib/node_modules/typescript/bin/tsc*
lrwxrwxrwx 1 tmartin users       37 Nov 23  2015 tslint -> ../lib/node_modules/tslint/bin/tslint*
lrwxrwxrwx 1 tmartin users       43 Mar 25 20:48 tsserver -> ../lib/node_modules/typescript/bin/tsserver*
lrwxrwxrwx 1 tmartin users       33 Nov 23  2015 yo -> ../lib/node_modules/yo/lib/cli.js*

In my case I could also fix this by just removing the /usr/bin/jade binary (technically just renaming it) but that worked for me because I already have the node directory in my path.

0 Likes

#9

This has probably now to do with how messy the installation of all my languages were: I do not have a nodejs folder in which there contains a bin folder that contains all executables of these languages.

Should I remove everything and attempt to reinstall these languages?

which npm
returns:
/usr/local/bin/npm

and when I do
ls -alF /usr/local/bin
I only see
drwxrwxr-x 2 500 500 4096 Jul 25 19:56 ./
drwxr-xr-x 10 root root 4096 Jul 20 21:39 …/
-rwxr-xr-x 1 root root 2378680 Jun 24 23:16 nasm*
-rwxr-xr-x 1 root root 931312 Jun 24 23:16 ndisasm*
-rwxrwxr-x 1 500 500 28807880 Jul 6 11:57 node*
lrwxrwxrwx 1 500 500 38 Jul 6 11:57 npm -> …/lib/node_modules/npm/bin/npm-cli.js*
-rwxr-xr-x 1 root root 486 Jul 25 19:56 sass*
-rwxr-xr-x 1 root root 494 Jul 25 19:56 sass-convert*
-rwxr-xr-x 1 root root 486 Jul 25 19:56 scss*

0 Likes

#10

This still doesn’t work! I’ve moved the jade executable to the folder in which npm is found with the rest of the executables and set the MyJade.subime-build file (which was put into the User folder inside Packages both of which I had to create myself since they didn’t exist) to
{
“cmd”: [“jade”, “$file”, “–pretty”],
“selector”: “text.jade”,
“linux”: {“path”: “/usr/local/bin:$PATH”},
“osx”: {“path”: “/usr/local/bin:$PATH”},
“windows”: {“shell”: “true”}
}
and STILL nothing!! I’ve almost given up.

0 Likes

#11

We’ll get you there, don’t worry!

Firstly, the directory output that you showed looks fairly correct (except that only npm is a symlink but I don’t know if that matters; as I said I am no nodejs expert)…

So lets check that you have a node.js version of jade installed:

tmartin:dart:~> npm ll -g jade

/home/tmartin/local/nodejs/lib

jade@1.11.0
    A clean, whitespace-sensitive template language for writing HTML
    git://github.com/jadejs/jade.git
    http://jade-lang.com

The path that it displays at the top will be different for you since my nodejs is installed just for me and not for the system as a whole (as it appears yours may be).

If that doesn’t return a value, then you would do npm install -g jade and then try again.

Now that we know that you definitely have a node.js jade installed,there are two things we can try here to try and find the jade we need.

The path that it outputs above is where it thinks this is installed. For me, it was /home/tmartin/local/nodejs/lib.

See if this sequence of commands works for you using the path it shows you. I’m not sure that it will but we can see. It may or may not be the same place where npm is installed, for example.

tmartin:dart:~> cd /home/tmartin/local/nodejs/lib
tmartin:dart:~/local/nodejs/lib> cd ..
tmartin:dart:~/local/nodejs> cd bin
tmartin:dart:~/local/nodejs/bin> ls -l
total 22108
lrwxrwxrwx 1 tmartin users       35 Nov 23  2015 bower -> ../lib/node_modules/bower/bin/bower*
lrwxrwxrwx 1 tmartin users       36 Jul 28 15:47 jade -> ../lib/node_modules/pug-cli/index.js*
lrwxrwxrwx 1 tmartin users       27 Nov 23  2015 n -> ../lib/node_modules/n/bin/n*
lrwxrwxrwx 1 tmartin users       59 Nov 23  2015 ncu -> ../lib/node_modules/npm-check-updates/bin/npm-check-updates*
-rwxrwxr-x 1 tmartin users 22607301 Nov  3  2015 node*
lrwxrwxrwx 1 tmartin users       44 Nov 29  2015 node-gyp -> ../lib/node_modules/node-gyp/bin/node-gyp.js*
lrwxrwxrwx 1 tmartin users       38 Nov  3  2015 npm -> ../lib/node_modules/npm/bin/npm-cli.js*
lrwxrwxrwx 1 tmartin users       51 Nov 23  2015 npm-check-updates -> ../lib/node_modules/npm-check-updates/bin/old-alias*
lrwxrwxrwx 1 tmartin users       38 Mar 25 20:48 tsc -> ../lib/node_modules/typescript/bin/tsc*
lrwxrwxrwx 1 tmartin users       37 Nov 23  2015 tslint -> ../lib/node_modules/tslint/bin/tslint*
lrwxrwxrwx 1 tmartin users       43 Mar 25 20:48 tsserver -> ../lib/node_modules/typescript/bin/tsserver*
lrwxrwxrwx 1 tmartin users       33 Nov 23  2015 yo -> ../lib/node_modules/yo/lib/cli.js*

If that works, that’s the location of the jade binary to use in the next steps.

If it doesn’t, we can try something like this; this asks npm where the root for the globally installed modules are. We can then try to then use that to find where jade was actually installed. This doesn’t find you the handy symlinked jade name, but it will at least get things up and running for you, which has to be a net win

tmartin:dart:~> npm root -g
/home/tmartin/local/nodejs/lib/node_modules
tmartin:dart:~> cd /home/tmartin/local/nodejs/lib/node_modules
tmartin:dart:~/local/nodejs/lib/node_modules> cd jade/bin/
tmartin:dart:~/local/nodejs/lib/node_modules/jade/bin> ls -l
total 8
-rwxrwxrwx 1 tmartin users 7889 Jun  6  2015 jade.js*

If that works, then this is the path you want to use; you will also want to change the name of the task that runs from jade to jade.js.

As a final last ditch effort, you can run a command like this:

tmartin:dart:~> find / -name jade -type f -print

This can take a long time to finish, and be prepared for it to throw a lot of Permission denied errors for paths that you don’t have the user rights to look inside (this is no worry since if you can’t look inside you probably can’t run anything inside it either).

This will spit out all of the possible files named jade and then you just have to figure out which one is the one that you want (i.e. you don’t want that one that was messing stuff up earlier).

You should be able to run whichever jade you like and see the following (or something similar to it). Anything else and that’s not the jade you want.

###Working Jade via node.js (path will differ)

tmartin:dart:~/local/nodejs/bin> ./jade --version
jade version: 0.1.0
jade-cli version: 0.0.0

The ‘You don’t want any part of it’ jade

tmartin:dart:~> jade --version
jade:I: "openjade" version "1.3.3-pre1"
jade:I: "OpenSP" version "1.5.2"
^C

Those directories should have existed; the user package is where your custom settings are stored, for example. To be sure you’re in the right location, select Preferences > Browse Packages... from the menu, then navigate inside the User directory.

The path you want to include in the file is one of the ones above that worked out. You may need to change the first part of the command to jade.js instead, based on what happened above.

0 Likes