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 git@github.com: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 --admin_email=magepsycho@gmail.com --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?

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. — Alan Kent, Dec 13 '14 at 17:40

score 2 · Answer 1 · answered Dec 13 '14 at 16:02

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;
    }
}

'Rewrite magento2 static files' is there just below it. I tried with both variations but none of them worked. — MagePsycho, Dec 13 '14 at 17:56

MagePsycho · Accepted Answer · 2014-12-15T13:57:36.380

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.

score 2 · Answer 3 · edited Apr 13 '17 at 12:55

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.

score 0 · Answer 4 · answered Aug 19 '17 at 00:05

0

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

answered Aug 19 '17 at 00:05

Nova Herdi Kusumah

101
1

css,js works but not images. Images are not loaded – insoftservice Feb 18 '19 at 04:41

score 0 · Answer 5 · answered Feb 13 '18 at 04:45

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.

Magento 2 Installation: css/js/images not loading

5 Answers5

Linked