Magento 2 Installation: css/js/images not loading

Question

I am trying to install Magento2(0.1.0-alpha107 ) in my localhost powered by OSX 10.10 + brew installed php-fpm + mysql + nginx.
Steps that I followed for installation:

• mkdir /path/to/magento2 && cd /path/to/magento2
• git clone [email protected]:magento/magento2.git .
• composer install
• cd setup
• composer install
• php -f index.php install --base_url=http://magento2alpha.dev/ --backend_frontname=admin --db_host=localhost --db_name=magento2alpha --db_user=root --db_pass=root --admin_firstname=Raj --admin_lastname=KB [email protected] --admin_username=admin --admin_password=pass123 --language=en_US --currency=USD --timezone=America/Chicago

So far everything worked great. But when you load the frontend: http://magento2alpha.dev/ it's showing plain text only (i.e. css/images/js are missing).
View source gives you the path like http://magento2alpha.dev/pub/static/frontend/Magento/blank/en_US/[css/images]/[css/images file] which led to the 404 page
My nginx conf file looks like:

server {
 listen 80;
 server_name magento2alpha.dev;
 root /Users/Raj/Sites/magento/magento2alpha;
 location /setup {
 try_files $uri $uri/ @setuphandler;
 }
 # Rewrite Setup's Internal Requests
 location @setuphandler {
 rewrite /setup /magento/magento2alpha/setup/index.php;
 }
 location / {
 index index.php index.html;
 try_files $uri $uri/ @handler;
 }
 # Rewrite Internal Requests
 location @handler {
 rewrite / /magento/magento2alpha/index.php;
 }
 # Rewrite magento2 static files
 #location /pub/static {
 # rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=1ドル? last;
 #}
 location /pub/static {
 try_files $uri $uri/ @static;
 }
 location @static {
 rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=1ドル? last;
 }
 #location ~ .php/ {
 # rewrite ^(.*.php)/ 1ドル last;
 #}
 location ~ \.php$ { ## Execute PHP scripts
 try_files $uri =404;
 expires off;
 fastcgi_pass 127.0.0.1:9000;
 fastcgi_read_timeout 900s;
 fastcgi_index index.php;
 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
 include fastcgi_params;
 ## Magento 2 Developer mode
 fastcgi_param MAGE_MODE "developer";
 }
}

I guess the issue lies in the static files rewrite. But this is what I followed from the github which is not working. Is there any workaround?

• Alan Kent: If you want core team to respond, please ask m2 questions on github. We track them there closely. Eg we can share ngix plans, describe deploy scripts etc.
• MagePsycho: @AlanKent Yeah going to post on github issue section.
• tread: Well changing to production modeis the quick fix

Answer 1

Any file requested within /pub/static that does not exist currently needs to get routed through Magento. This is currently done through /pub/static.php.

You can see this rewrite in /pub/static/.htaccess

RewriteEngine On
# Remove signature of the static files that is used to overcome the browser cache
RewriteRule ^version.+?/(.+)$ 1ドル [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule .* ../static.php?resource=0ドル [L]

Looking at your nginx configuration you have this commented out:

 # Rewrite magento2 static files
 #location /pub/static {
 # rewrite ^/pub/static/(.*)$ /magento/magento2alpha/pub/static.php?resource=1ドル? last;
 #}

Presumably making those lines executable would solve the issue, I'm not very familiar with nginx configuration but something like this might also work:

location / {
 if (!-e $request_filename){ 
 rewrite ^(.*)$ /../static.php?resource=0ドル last;
 }
}

• MagePsycho: 'Rewrite magento2 static files' is there just below it. I tried with both variations but none of them worked.

Answer 2

Finally, I have to modify my nginx conf file to make it working as:
(REF: https://github.com/magento/magento2/issues/802)

server {
 listen 80;
 server_name magento2alpha.dev;
 root /Users/Raj/Sites/magento/magento2alpha;
 location /setup {
 try_files $uri $uri/ @setuphandler;
 }
 # Rewrite Setup's Internal Requests
 location @setuphandler {
 rewrite /setup /setup/index.php;
 }
 location / {
 index index.php index.html;
 try_files $uri $uri/ @handler;
 }
 # Rewrite Internal Requests
 location @handler {
 rewrite / /index.php;
 }
 location /pub/static {
 try_files $uri $uri/ @static;
 }
 location @static {
 rewrite ^/pub/static/(.*)$ /pub/static.php?resource=1ドル? last;
 }
 location ~ \.php$ { ## Execute PHP scripts
 try_files $uri =404;
 expires off;
 fastcgi_pass 127.0.0.1:9000;
 fastcgi_read_timeout 900s;
 fastcgi_index index.php;
 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
 include fastcgi_params;
 ## Magento 2 Developer mode
 fastcgi_param MAGE_MODE "developer";
 fastcgi_param PHP_FLAG "session.auto_start=off \n suhosin.session.cryptua=off";
 fastcgi_param PHP_VALUE "memory_limit=256M \n max_execution_time=18000";
 }
}

One thing that I noticed is: If you create virtual host specific configuration in nginx's conf.d is more resource expensive & slower than keeping in sites-enabled dir.
[Edit]
Sorry my bad, xdebug was causing the slowness not the nginx conf.

Answer 3

Taken from: https://magento.stackexchange.com/a/64808/3326

When not in production mode Magento 2 will try to create symlinks for some static resources. You can change that behavior by doing the following.

Open up app/etc/di.xml and find the virtualType name="developerMaterialization" section. In that section you'll find an item name="view_preprocessed" that needs to be modified or deleted. You can modify it by changing the contents from Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink to Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

Delete the files under pub/static to get rid of any existing symlinks. You may want to be careful not to delete the .htaccess file.

This should solve your error with the symlink.

Answer 4

this is the best answer so far

You can modify it by changing the contents from Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink to Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

• insoftservice: css,js works but not images. Images are not loaded

Answer 5

I had a similar problem after running the Magento 2 install and found that the install failed to actually deploy the static files. I received 404 for many admin files, including bootstrap, etc. In order to fix I ran a command from the site root to force the static file deployment:

php bin/magento setup:static-content:deploy -f

This will regen static assets for frontend themes and adminhtml backend.