I'm building my first tiny Phoenix app and ran into a super annoying issue:
Every time I make a change to a JS file e.g. web/static/js/socket.js Brunch is picking up the change and recompiling priv/static/js/app.js. I have verified that the changes are actually compiled into app.js correctly.
However, I cannot make the server serve the updated files to the clients.
Any ideas how I can make cache invalidation work correctly?
Could it be a configuration issue with Cowboy?
Notice: I'm running the server inside a Vagrant box (Ubuntu) and the browser on the host machine (OSX).
Update: This is turning into a mystery! Apparently the content of the response comes from the cached file but the length is determined by the length of the file on disk.
Examples:
echo "hey" > foo.js
(Filesize 4)
Response for curl http://localhost:4000/js/foo.js is hey\n
printf "." > foo.js
(Filesize 1)
Response: h
printf "1234567890" > foo.js
(Filesize 10)
Response (in hex): 6865 790a 0000 0000 0000 (Response is hey\n followed by blank padding)
Turns out to be a known issue with Virtual Box' Shared file system.
Switching to NFS solved the problem.
A comment on issue 812 in the Cowboy project describes my exact problem:
https://github.com/ninenines/cowboy/issues/812
In addition to that it might be useful to configure Brunch to use polling if changes to your JS files are not picket up. You can do that by adding the following snippet to brunch-config.js.
watcher: {
usePolling: true
},
Related
I'm running Vapor 4.3 and Leaf with Xcode on my Mac without any issues.
public directory middleware is enabled:
let fileMW = FileMiddleware(publicDirectory: directory)
app.middleware.use(fileMW)
as soon as I build the image using the default dockerfile and run it on the docker, the css and all image files are not loaded anymore.
Note: the dockerfile is the exact same one that came with the vapor new command. (Updated to the date of the writing this post)
Safari shows this error:
[Error] Did not parse stylesheet at 'http://127.0.0.1/styles/index.css' because non CSS MIME types are not allowed in strict mode.
Chrome shows this warning:
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://127.0.0.1/styles/index.css".
What am I missing?
Looks like it is a case sensitivity issue! Mac has no problem finding files with this issue but Linux not!
⚠️ Even if you already set: app.routes.caseInsensitive = true, it will not affect your resources requests.
So make sure you have set all paths exactly as they appear in pwd command.
After changing an asset (a css or js) file I see in the logs that the change was noticed and compiled, and the browser also auto-reloads.
[debug] Live reload: priv/static/js/app.js
10:53:15 - info: compiled MyComponent.jsx and 2095 cached files into 2
files in 2.3 sec
However, it doesn't appear that the assets in /priv/static were actually updated. I can only see my change in the browser once I run mix phx.digest, and hard refresh the browser.
Any ideas on how to troubleshoot this?
Using:
Phoenix 1.3
brunch 2.10.7
config/dev.exs:
config :my_app, MyApp.Web.Endpoint,
http: [port: 4000],
debug_errors: true,
code_reloader: true,
check_origin: false,
watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
cd: Path.expand("../assets", __DIR__)]]
# Watch static and templates for browser reloading.
config :my_app, MyApp.Web.Endpoint,
live_reload: [
patterns: [
~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
~r{priv/gettext/.*(po)$},
~r{lib/my_app/web/views/.*(ex)$},
~r{lib/my_app/web/templates/.*(eex)$}
]
]
TL;DR — If you don't set the cache_static_manifest setting on your endpoint, it won't generate versioned URLs.
So, I know I'm about three years late here, but I recently figured this out. I discovered that merely setting the cache_static_manifest value in the Endpoint config will cause it to use the digest in any mode. (This is documented, but not in a way that seemed particularly clear to me.)
Now, you might be thinking "But I didn't set that in dev mode." I thought that, too, until I realized that I had written a naive config/runtime.exs.
At the time, I had been focused on configuring things a runtime when running a release, but completely forgot that it configures things even when not running in a release. Once I made it conditional, everything was fine.
Example:
if Config.config_env == :production do
config :my_app, MyAppWeb.Endpoint, cache_static_manifest: "priv/static/cache_manifest.json"
end
I ran into the same issue and for me it helped to manually remove the static folder with rm -rf priv/static and to restart the server with mix phx.server. Afterwards the hot reloading worked without having to manually run mix phx.digest all the time.
Another possible cause is that the Endpoint module (lib/my_app_web/endpoint.ex) is setting Plug.Static to use compressed assets:
defmodule MyAppWeb.Endpoint do
use Phoenix.Endpoint, otp_app: :my_app_web
plug Plug.Static,
# ...
gzip: true,
Then, if a release has been built from within the project directory and the gzipped assets are still present when developing, they will be served instead of the newly-saved, non-compressed assets.
To avoid this:
config/dev.exs:
config :my_app, :environment, :dev
config/test.exs:
config :my_app, :environment, :test
config/prod.exs:
config :my_app, :environment, :prod
lib/my_app_web/endpoint.ex:
defmodule MyAppWeb.Endpoint do
use Phoenix.Endpoint, otp_app: :my_app_web
in_prod = Application.get_env(:my_app, :environment) == :prod
plug Plug.Static,
# ...
gzip: in_prod,
I'm just learning d3, and I'm attempting to import data from a CSV file, but I keep getting the error "XMLHttpRequest cannot load file:///Users/Laura/Desktop/SampleECG.csv. Cross origin requests are only supported for HTTP. ". I've searched for how to fix this error and have ran it on a local web server, but I haven't found a solution that works for d3.v2.js. Here's a sample of the code:
var Time = []
ECG1 = []
d3.csv("/Desktop/d3Project/Sample.csv", function(data)
{
Time = data.map(function(d) {return [+d["Time"]];});
ECG1 = data.map(function(d) {return [+d["ECG1"]];});
console.log(Time)
console.log(ECG1)
});
Any help will be much appreciated.
This confused me too (I am also a d3 beginner).
So, for some reason, web browsers are not happy about you loading local data, probably for security reasons or something. Anyways, to get around this, you have to run a local web server. This is easy.
In your terminal, after cd-ing to your website's document root (thanks #daixtr), type:
python -m SimpleHTTPServer 8888 &
Okay, now as long as that terminal window is open and running, your local 8888 web server will be running.
So in my case, originally the web page I was working on was called
file://localhost/Users/hills/Desktop/website/visualizing-us-bls-data-inflation-and-prices.html
When I opened it in chrome. To open up my page on my local web server, I just typed (into the chrome search bar):
http://localhost:8888/Desktop/website/visualizing-us-bls-data-inflation-and-prices.html
Now, reading in CSVs should work. Weird, I know.
To those using built-in python webserver and who are still experiencing issues, do REMEMBER and make sure that you run the "python -m SimpleHTTPServer 8888" invocation at the correct path of which you consider to be your DocumentRoot. That is, you cannot just run 'python -m SimpleHTTPServer 8888' anywhere. You have to actually 'cd /to/correct/path/' containing your index.html or data.tsv and then from there run 'python -m SimpleHTTPServer 8888'.
Also, just learning D3 for school work. I was trying to run this simple D3 example:
https://gist.github.com/d3noob/b3ff6ae1c120eea654b5
I had the same problem as OP re: loading data using Chrome browser. I bet the great solution Hillary Sanders posted above was re: Python 2.X.
My answer is re: Python 3.X [OS: Ubuntu 16x]:
Open a terminal window within the root directory of your project, then run:
python3 -m http.server
It will serve HTTP on port 8000 by default unless it is already taken, in that case to open another port, e.g. 7800, run:
python3 -m http.server 7800
Then, on your Chrome browser address bar type:
localhost:8000
The above worked for me because I only had an index.html page in my root folder. In case, you have a HTML page with a different name, type the whole path to that local HTML page and it should work also. And, you should be able to see the graph created from the data set in my link (that must be in a folder like data/data.csv). I hope this helps. :-)
Use Firefox, idk what Chrome tries to accomplish
I am new to this so hopefully I make sense when I ask this question.
I am doing this on windows 7 through the command prompt.
I have installed jekyll but I am having trouble with seeing the jekyll web page. Nothing appears. What I see when I write 'jekkyl serve' is:
c:\users\spiridon\desktop\portfolio\jekyll serve
Configuration file: c:users/spiridon/desktop/portfolio/_config.yml
source: c:users/spiridon/desktop/portfolio
destination: : c:users/spiridon/desktop/portfolio/_site
generating...
c:/ruby193/lib/ruby/gems/1.9.1/gems/posix-spawn-0.3.9/lib/posix/spawn.rb:164: warning: cannot close fd before spawn
'which' is not recognized as an internal or external command, operable program or batch file.
←[31m Liquid Exception: no such file or directory - python c:/ruby193/lib/ruby/gems/1.9.1/gems/pygments/mentos.py in _posts/2014-10-23-welcome-to-jekyll.markdown←[0m
done.
Please add the following to your Gemfile to avoid polling for changes:
require 'rbconfig'
if RBConfig: :CONFIG['target_os'] =~ /mswin|mingw|cygwin/i
gem 'wdm', >= 0.1.0'
end
Auto-regeneration: enabled for 'c:/users/spiridon/desktop/portfolio'
Configuration file: c:/users/spiridon/desktop/portfolio/_config.yml
server address: http://0.0.0.0:4000/
server running... press ctrl-c to stop.
i am using ruby193
jekyll 2.4.0
this is my _config.yml:
# Site settings
title: Your awesome title
email: your-email#domain.com
description: > # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username: jekyll
# Build settings
markdown: kramdown
I am brand new to this language and most other programming languages. I have also watched youtube videos and searched online for a solution but could not find anything. thank you.
From the Jekyll homepage
While Windows is not an officially-supported platform, it can be used
to run Jekyll with the proper tweaks.
Please follow all instructions on this page dedicated to hints to get Jekyll running on Windows or try this Jekyll Windows project.
The errors you get will probably be gone once you followed one of the above hints but still a short explanation:
'which' is not recognized as an internal or external command, operable program or batch file.
i.e. windows has no program called which.
which does not exists on Windows systems. On unixoid systems it's used to resolve what exactly is executed when you run the command given as attribute to which.
From the Wikipedia:
In the Internet Protocol version 4 the address 0.0.0.0 is a non-routable meta-address used to designate an invalid, unknown or non applicable target.
So it's no surprise opening it in the browser doesn't work. Jekyll cannot start a server at it runs into errors. So it displays this generic IP as server address.
I'm trying to get assetics running with the yui compressor and, if this is running, sass. Right now, both don't work. When removing all filters from config.yml and the twig template, it works and php app/console assetic:dump does copy the css and js files.
Now I want to add the yui compressor and my config.yml looks like this:
assetic:
debug: %kernel.debug%
use_controller: false
filters:
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar
Adding the filter to the template and running assetic:dump again ends in the following error (translation of message by me):
[RuntimeException]
The syntax for filename, directory name or drive name is wrong
I found an article telling me to specify the path to java.exe, so I add this to config.yml:
assetic:
..
java: C:/Program Files (x86)/Java/jre6/bin/java.exe
..
Now assetic:dump tells me:
[RuntimeException]
The COMMAND "C:/Program" is either written wrong or
I tried playing around with both variables (using \ or \ instead of /, adding single or double quotes, working with short alias Progra~1 or Progra~2) in the config, but I didn't get anywhere. The both errors comming up all the time. Maybe someone can point me in the right direction.
Ok, I figured it out. Man, this one was brutal.
Let's start with the easy stuff. A working version of the config.yml can look like this:
assetic:
debug: false
use_controller: false
java: C:\Program Files (x86)\Java\jre6\bin\java.exe
sass: C:\Program Files (x86)\Ruby192\bin\sass.bat
filters:
scss: ~
yui_js:
jar: %kernel.root_dir%\Resources\java\yuicompressor-2.4.6.jar
For some reason, assetic is always importing a whole directory for scss, so I had to make a combine.scss which imports the other scss files in the correct order.
And now it gets ugly, as one have to change the assetics core in order to get this working. The developers of assetic know this bug and I think it is fixed in some development trunk/branch but not the stable one.
The Assetic\Util\ProcessBuilder has to be changed on line 95
if (defined('PHP_WINDOWS_VERSION_MAJOR')) {
,line 103
$script .= ' '.implode(' ', array_map('escapeshellarg', $args));
and line 110
return new Process($script, $this->cwd, null, $this->stdin, $this->timeout, $options);
I hope this bug get fixed soon and till then anybody trying to get it working finds this thread... Took me like 8 hours of debuging, reading and trying different approaches.
Answer by Boo Nov 19 at 22:53 did work for me by changing everything he mentioned in Assetic\Util\ProcessBuilder (I ignored line 95 as it looks the same as in my file)
Now it works on windows. Thanks!
Just to confirm. Im using Symfony 2.0.7 and yuicompressor-2.4.7
For other users who use window server 2008 r2 :
Maybe you should change the C:\windows\Temp folder property to 777 (read/write) for the IIS user / or the machine's normal user
please unpack the ruby.7z from rubyinstaller.org , and go to C:\_ruby193\bin , in this unpack position you should exec the CMD prompt , type :
ruby -S gem install sass
so that you will get the sass.bat in that position
It's time to use Boo's best answer , and please notice that in symfony2 dev env maybe it's not necessary to change the use_controller to false (in the config.yml) , because there's another use_controller in the config_dev.yml (set to true) , and in routing_dev.yml there's also a _assetic router , they're perhaps associated.