JS files in Phoenix Project

I have created my Project with -no--brunch, Now I have added a file in priv/static/js as main.js,

What I want to do is: In Rails I only add a file and reference it in application.js and then in that file I use this method

firstOne = ->
      console.log("main on main")

window.initializeAdmins = ->

and the in the any of my HTML file i can easily do as

  $(document).ready(function () {

And so I can do and use what ever I want to do, Is that possible in Phoenix? without using brunch. I have tried brunch but its giving me strange behaviour as Creating modules and other stuff , Why I cant be simple as it is.

Create a js file, reference it in main js file and then use it anywhere where i want to.

1 Like

That should work the same if you manually load the file; if I’ve got this right: you have a function or method in a JS file. It’s global. In an arbitrary HTML file you’re waiting for the document to load so that you can guarantee the function is available. You’re running the function.

Rails does what it does via the Sprockets library; it is importing the JS you referenced in application.js via magic. What you’ve done by saying --no_brunch is remove the equivalent to Sprockets from Phoenix. It can’t load your file automatically because you’ve removed the thing that would allow it; by default, with brunch, you get a main JS file that you can import other JS files into (and it has to be specified explicitly; it doesn’t do magic like Rails). Without brunch, you need to manually import every JS file into the head or foot of your HTML

1 Like

Okay I get it but while using brunch how is that possible do normal JS and Coffee stuff, I dont want to go with Modules way and then exporting it and etc,

I just want to do JS and Coffee Script in my project as I want to add Datatables.

Is there any good tutorial for that? Where I can see how to setup normal JS files and Also how could I use Jquery in my project

Compile the CS to Is manually? You’ll need to put a script reference to every JS file in the HTML, just as you would if you were hand writing an HTML page

Actually you are not getting me.

How to add JQuery and Other JS files to A phoenix project. Am struggling with this for almost 3 days now and I am totally giving up now on Phoenix as this is very minimal thing which i want to achieve

No, I’m definitely getting you. Put the files in priv/js. In the main layout file, reference the scripts in script tags. You don’t want to use any kind of task runner, so you need to manually specify the scripts. Phoenix is generating HTML, you just reference JS files as you would do in any HTML project.

  <!-- some stuff -->
  <script src="https://someJSCDN.com/someExternalLibrary.js" />
  <script src="/js/copyofJquery.js" />
  <script src="/js/somefile.js" />
  <script src="/js/someotherfile.js" />

Okay Can I use CoffeeScript in the same way ? Without having brunch?

Okay thanks for all the information, Is there any tutorial for this?


Write the coffeescript, compile it to JS manually.

And if you want to do it in-browser (not recommended, but it should work), include the coffeescript compiler JS file before your CS files, and make sure they have the type coffeescript - eg <script type="text/coffeescript>: cf http://stackoverflow.com/questions/5170473/is-there-a-way-to-send-coffeescript-to-the-clients-browser-and-have-it-compiledanswer-5173165

Also https://github.com/HashNuke/rotor with https://github.com/HashNuke/coffee_rotor, but you would need to set them up in the project, and they are unmaintained for 2-3 years now (note Brunch makes Rotor completely obselete in Phoenix projects)

Okay Thanks. The only problem I have with brunch Is. I dont have any idea how to use it, I should get getter with it I think.

Thanks for your efforts It helped a lot…

Gimme an hour or so to get work meetings out of the way, I’ll set up a test phoenix project with CS compilation as an example

That would be awesome, Are you open source? I will look your code to get inspiration PLUS It would be a so so great to have a test project with JQuery and sample js files :slight_smile: using brunch

If all you want is to set brunch to compile coffeescript it’s very simple.

This gist shows you a very basic configuration you have to make to set up the coffee compiler and jquery globals.
Just on my opinion, since brunch is already ready to compile newer versions of javascript you don’t really gain too much with coffee.

1 Like

Well, just trying to do an example Phoenix project with explanations, and looks like export doesn’t play nicely with coffee-script-brunch inthis context - not sure if I’m doing something wrong though. ex:

# example.coffee
example = ->
  console.log('blah blah')

export example
// app.js
import { example } from "./example.coffee";


This thows the “SyntaxError: export declarations may only appear at top level of a module” error that indicates Babel isn’t transpiling the modules [properly]. Works fine when not CS, but in CS it fails which seems like an issue with order of operations; transpiling step done by Babel doesn’t seem to be happening with the CS files.

This works:

# example.coffee
example = ->
  console.log('blah blah')

module.exports =
  example: example

I thought it was because the CS version in the plugin was out of date, but it isn’t really, it’s on 0.11.x., which supports ES-style module imports/exports

Maybe It would be easier to make a brunch config using CS only.
Personally I don’t see why use CS over ES6, but that is up to @ijunaidfarooq.

1 Like

@ijunaidfarooq here is the example project. Writeup is quite long, if anything isn’t clear either put an issue in or ask here, I’ll get it updated. Examples may be a bit silly. Anyway:

Every stage (Scss, CS, globals) has it’s own branch; the main branch (`diy_brunch) just has the description on a default Phoenix install so kinda expects that you pull it down and go through it. There are no major things, just a small number of very small changes.

As @cassiogodinho mentions, doesn’t make an awful lot of sense to use CS over ES6, and you get ES6 out of the box with Phoenix, no setup or config. I’d strongly advise using that, even if it is a little bit less terse; CS doesn’t really have anything bar (arguable) syntax niceties over ES6, and with ES6 you get a whole lot more. Plus a lot more people will be able to understand the code if it’s ES6, so it’s a lot easier to get help. But ¯_(ツ)_/¯


Thanks a ton… For all your efforts I learned a lot thank You so much :slight_smile: