What is the correct way to add js files and fonts to a Phoenix project?

Phoenix Forum Questions / Help
1

What is the correct way to add js files and fonts to a phoenix project.
I thought it was just a simple matter of adding js to the web/static/js folder and import it in app.js ?

as for the fonts do I need to reference them somewhere ?

Both of the questions are related to materialize
I am completely blank when it comes to javascript. only thing I know about it is that I do not like it.

1 Like
2

The way brunch works, and as configured with phoenix, is that files in the web/static/assets/ directory are copied untouched to priv/static. So any assets you want copied without processing into your app, you place in web/static/assets. So in your case, the fonts you have can be placed in web/static/assets/fonts and they will be copied into priv/static/fonts which is an exposed directory for static file serving by default. See the Plug.Static :only options in your endpoint.ex.

7 Likes
3

Thanks ,

There was a bug in the css/js files causing me a slight headache. everything just works now.

4

I have all the js file added to /priv/static/js/app.js
but still it wont work … what am I doing wrong ?

5

You need to provide more information. What isn’t working? What is the output of the console when you start your app? If it says it compiles okay, what is the output of the js console when you visit the page, etc?

6

Also to be clear, if you are using brunch, you don’t place files into /priv/static yourself. Brunch builds them there, so your source javascript should live in web/static/js. Brunch will compile the files and concatenate them into a single /priv/static/js/app.js bundle.

1 Like
7

Thad was horridly formulated , end of workday :slight_smile:

trying to get some js libraries from NPM to work and a few old school js scripts in vendor.
I do the imports where necessary and by all research I have done today it should work.

my problem is that not even console.log(“Hello World”) is not working from vendor.
What I meant with everything is in priv/static/js is that brunch does what it is supposed to do and crams all the scripts into the app.js in the priv/static/js/app.js but they are not firing. for all the NPM stuff I am importing them in app.js in web/static/js/app.js file. I think I read something about a node version causing a similar problem on stack overflow.

everything looks good but nothing is firing. I have the same issue with fonts they where they are suposed to be and fonts is enabled in the endpoint.ex file

I have also made sure that the order they are imported and loaded is correct ie Jquery first due to dependency etc.

I have no clue what I am doing wrong.

8

copied the project to my home computer , it works …