Magento 2 not loading CSS and JavaScript - javascript

I have installed magento 2 successfully on localhost but I am not able to see admin panel as it render 404 error to me.
Secondly, When I open front-end then CSS and JavaScript is not loading.They also renders 404 errors.
Also When I try to run command:
{your Magento install dir}/bin/magento setup:static-content:deploy
I got the following error
[InvalidArgumentException]
There are no commands defined in the "setup:static-content" namespace.

This One Worked for Me.
use this Command php bin/magento setup:static-content:deploy
Step 1 : In CMD Open your root directory using cd command
Step 2 : php bin/magento setup:static-content:deploy - run this Command
then,Check Your pub/static folder, CSS and Js files will be available there
Refer this

Here is the simplest solution if showing version name in css path
like : pub/static/version323334/
then run this query in my sql
INSERT INTO core_config_data (path, value)
VALUES ('dev/static/sign', 0)
ON DUPLICATE KEY UPDATE value = 0;
after that clear the config cache
bin/magento cache:clean config
you can also disable static file version form admin

Try the same command as root user by adding sudo like below
sudo php bin/magento setup:static-content:deploy

Changing dev/static/sign to 0 in core config data worked for me
then,
bin/magento cache:flush
then,
php bin/magento setup:static-content:deploy -f

Though it is old question, its answers could not help me to fix my issue what would generate same error message. I suggest the followings:
At first, you can find its underlying cause. In your magento2 directory, find magento error as follows:
tail var/log/system.log
Or find if there is any error in php error log file
If you find isolated error, fix it.
If no error is found, do the followings. Remove generate folder by executing the following commands:
sudo rm -rf pub/static
sudo rm -rf var/cache
sudo rm -rf var/composer_home
sudo rm -rf var/generation
sudo rm -rf var/page_cache
sudo rm -rf var/view_preprocessed
After deleting them, you can re-create them by executing the following commands:
sudo php bin/magento setup:static-content:deploy -f

We also faced this issue once, and sorted it out. For this you need to go directly in bin directory and use that command. For example,
php magento setup:static-content:deploy
Some times if you run this command outside of bin or from any directory
php bin/magento setup:static-content:deploy
then you will get error like (may be it is because of linux system),
[InvalidArgumentException]
There are no commands defined in the "setup:static-content" namespace.
Update:
If any *.xml file in our custom modules is not valid then the same error will come.

I also had same issue and below step solves my issue:
Step 1: Navigate to directory where magento is installed.
Step 2: Run "sudo php bin/magento setup:static-content:deploy"

Provide static deploy command like this:
php bin/magento setup:static-content:deploy
Please set full permission for pub and var folders.

After trying all the solutions mentioned over here and in https://magento.stackexchange.com/questions/97209/magento-2-css-and-javascript-not-loading-from-correct-folder
We were not able to get this thing going.
But this is very weird answer but it worked for us.
Firstly, We cleared the cache and ensured that the static files are being created inside pub/static/ folder.
Then checked the deployed_version.txt contains same version number as being loaded in the URL.
Our main culprit was the .htaccess file which was present in pub folder. There should be just one .htaccess file inside pub/static folder but not in pub folder.
This did the trick for us after searching everywhere.
Hope it helps others looking for the similar answer.

Run the following commands in CLI interface of your Magento2 root folder:
$ php bin/magento setup:static-content:deploy
$ php bin/magento indexer:reindex
Then delete var folder by this command at your root of magento2.
$ rm -rf var/*
Then refresh your homepage and admin panel.

If you facing problem of css and design after installation in Windows, follow these steps
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
make sure apache "rewrite_module" is enable and then restart the server
delete cache folder under var/cache

you just need to run this command on your Terminal
php bin/magento setup:static-content:deploy
Make sure you give the the root path of your magento in terminal and then run the above command

Just Open the
MAGENTO_ROOT/app/etc/di.xml
and replace below code form line number 574
<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>
TO
<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Copy</item>
DELETE
MAGENTO_ROOT/pub/static/_requirejs
MAGENTO_ROOT/pub/static/adminhtml
MAGENTO_ROOT/pub/static/frontend

Just simple and right solution, hope usefull.
Go to your wampserver icon and click on it and than
Apache->apache modules->rewrite_module[enable this]
After this re-start all services and check it .

This error happens when you have not setup permission correctly. It can't see that the command actually exist.
Try running:
sudo find . -type d -exec chmod 770 {} \; && sudo find . -type f -exec chmod 660 {} \; && sudo chmod u+x bin/magento
sudo chown -R $(whoami):www-data .
Change www-data to appropriate webserver user. e.g. apache or www-data.

This worked for me:
1) Static content deploy. Run the below command from Magento 2 root directory:
sudo php bin/magento setup:static-content:deploy
2) Clear everything in var/cache directory or flush the Magento 2 cache using the below command:
php bin/magento cache:flush
3) Set proper permissions for Magento 2 directories by executing the below command from Magento 2 root directory:
sudo find . -type d -exec chmod 770 {} \; && sudo find . -type f -exec chmod 660 {} \; && sudo chmod u+x bin/magento
Hope this helps.

I just do
rm -rf var/di
then it works again.

Usually this happens because of failed compilation in the var/di folder. You can solve it by deleting everything in your var folder.
Also for future, don't forget that magento command line implements symfony verbosity levels: append --v or ---v to your command to see the exact error.

Please follow the steps below to get rid of this issues.
1) Download the Magento 2.
2) Extract this in your www OR htdocs directory.
3) Install the magento. Do not use localhost, use 127.0.0.1 in store url and admin url.
4) After successful installation DO NOT RUN MAGENTO.
5) Now delete the cache / session of magento 2. Go to the below mentioned paths and delete the files.
Magento Root > var > cache > Delete all files
Magento Root > var > page_cache > Delete all files
Magento Root > var > session > Delete all files
6) Change the behavior of symlinks for some static resources as mentioned below:-
When Magento 2 is not in production mode, it will try to create symlinks for some static resources on local server. We have to change that behavior of Magento 2 by going to edit ROOT > app > etc > di.xml file. Open up di.xml in your favorite code editor, find the virtualType name="developerMaterialization" section. In that section below, you will find an item <item name="view_preprocessed" xsi:type="object"> which needs to be modified. You can modify it by changing the following content:
Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink
To:
Magento\Framework\App\View\Asset\MaterializationStrategy\Copy
7) Delete all the files except .htaccess
Magento Root > pub > static > Delete all files except **.htaccess**
ITS DONE. Now you may run the magento Front and Backend URL

The following answer works for me, thanks:
open file MAGENTO_ROOT/app/etc/di.xml
and replace below code form line number 574
Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink
with
Magento\Framework\App\View\Asset\MaterializationStrategy\Copy
DELETE
MAGENTO_ROOT/pub/static/_requirejs
MAGENTO_ROOT/pub/static/adminhtml
MAGENTO_ROOT/pub/static/frontend

below Solution worked:
Please un below query in database.
INSERT INTO core_config_data (path, value) VALUES ('dev/static/sign', 0) ON DUPLICATE KEY UPDATE value = 0;
https://magento.stackexchange.com/questions/97209/magento-2-css-and-javascript-not-loading-from-correct-folder

if you have tried php bin/magento setup:static-content:deploy or any such related commands and the issue is still there. Then you may like to try this.
This fix addresses No Css and Javascript and Admin 404 page issues after magento installation (v2.3).
step 1 : open httpd.conf.
step 2 : search for
AllowOverride (may be written as AllowOverride all)
Require (may be written as Require local)
in directory section of this file.
step 3 : Change
AllowOverride to AllowOverride All
Require to Require All Granted

If you are facing theming issue after Installation in Magento 2. You can follow these steps :
Run this query:
INSERT INTO core_config_data (path, value) VALUES ('dev/static/sign', 0)
ON DUPLICATE KEY UPDATE value = 0;
For local machine run this query:
UPDATE core_config_data SET value = '0' WHERE
core_config_data.path LIKE '%web/seo/use_rewrites%';
Remove all the files from pub and var directory:
sudo rm -rf var/di var/generation/ var/page_cache/ var/cache/
pub/static/frontend/ pub/static/adminhtml/ pub/static/_requirejs/
pub/static/deployed_version.txt
Give Permission to var and pub directories of your project:
sudo chmod -R 777 var/* pub/*
Upgrade Setup:
sudo bin/magento setup:upgrade
Deploy content:
sudo php bin/magento setup:static-content:deploy
After these steps, you will be able to see proper theme.

I've faced the same issue and i get it resolved using the following procedure.
php bin/magento setup:static-content:deploy
php bin/magento c:f
sudo chmod -R 777 var/ pub/ generated/
sudo chown -r your-website-user:your-website-group
ln -s static pub/static
ln -s media pub/media

If all of the above is not working try to set 0 in the below paths in core_config_data table
web/secure/use_in_frontend
web/secure/use_in_adminhtml

If you are facing problem of css and js page load design after installation in magento2
please follow the following step-:
open the terminal and navigate to magento web root
$ cd /var/www/html/magento2
Step 1.
$ php bin/magento setup:static-content:deploy
Step 2.
$ php bin/magento indexer:reindex
Step 3.
make sure apache “rewrite_module” is enable and then restart the server
Step 4.
$ chown -R www-data:www-data /var/www/html/magento2
Step 5.
$ chmod -R 777 /var/www/html/magento2
Step 6.
delete cache folder under var/cache
The above step working. I hope this will work for you also.
Let me know if any issue. :)

Related

How to download single page in separate folders with wget

I want to download a single page of a website.
I can use Chrome Save as but all assets will be saved in one directory (website_files).
I used Webhttrack but it's not work on https
How can I save files in folders as page structure with wget? If you know other tools, please tell me.
Eg: example.com/js/js.js should be stored in js folder
Thanks to #DaFois, I solved my problem. Here is the command I used:
wget -E -H -k -K -N -p -P somename http://example.com/something
Reference:
https://gist.github.com/dannguyen/03a10e850656577cfb57
http://www.veen.com/jeff/archives/000573.html

Run Geany as root

I have ubuntu 16.04 and I installed Geany using Ubuntu Software Centre. I need to edit some php and js files which happen to be in root directories. So when I try to save the changes in Geany, it generates following error:
Error opening file '/var/www/html/project1/team/team.php': Permission denied
The file on disk may now be truncated!
How can I make Geany to edit and save these files?
try
gksudo geany
Use gksudo with graphical apps written in GTK+ instead of sudo
sudo -Eb geany
worked for me on Debian 10 with xrdp. I executed the command on xrdp desktop Terminal Emulator.
-E: preserve user environment when running command
-b: run command in the background
Note that without -b option the control will not return to terminal until geany is closed.
Not an expert on this, was just trying to see sudo's options and this did the trick!
sudo geany
but you really shouldn't edit your code in production environment
if you are developing locally navigate to your www file using terminal
after that you have to change the permission to 777 using this command
sudo chmod 777 html
which mean every one can read-write-execute your files
REMEMBER THIS IS FOR LOCALLY DEVELOPING

Running a bash script before startup in an NGINX docker container

I'm trying to run a javascript app on localhost:8000 using docker. Part of what I would like to do is swap out some config files based on the docker run command, I'd like to pass an environment variable into the container so that the bash script can use that as a parameter.
What my dockerfile is looking like is this:
FROM nginx
COPY . /usr/share/nginx/html
CMD ["bash","/usr/share/nginx/html/runfile.sh"]
And the bash script looks like this:
#!/bin/bash
if [ "$SECURITY_VERSION" = "OPENAM" ]; then
sed -i -e 's/localhost/openam/g' authConfig.js
fi
docker run -p 8000:80 missioncontrol:latest -e SECURITY_VERSION="TEST"
Docker gives me an exception saying -e exec command not found.
However if I change the dockerfile to use ENTRYPOINT instead of CMD, the -e flag works but the webserver does not start up.
Is there something I'm missing here? Is the ENTRYPOINT being overriden or something?
EDIT:
So I've updated my dockerfile to use ENTRYPOINT ["bash","/usr/share/nginx/html/runfile.sh", ";", " nginx -g daemon off;"]
But the docker container still shuts down. Is there something I'm missing?
NGINX 1.19 has a folder /docker-entrypoint.d on the root where place startup scripts executed by thedocker-entrypoint.sh script. You can also read the execution on the log.
/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will
attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in
/docker-entrypoint.d/
/docker-entrypoint.sh: Launching
[..........]
/docker-entrypoint.sh: Configuration complete; ready for start up
For my future self and everybody else, this is how you can set up variable substitution at startup (for nginx, may also work for other images):
I've also wrote a more in depth blog post about it: https://danielhabenicht.github.io/docker/angular/2019/02/06/angular-nginx-runtime-variables.html
Dockerfile:
FROM nginx
ENV TEST="Hello variable"
WORKDIR /etc/nginx
COPY ./substituteEnv.sh ./substituteEnv.sh
# Execute the subsitution script and pass the path of the file to replace
ENTRYPOINT ["./substituteEnv.sh", "/usr/share/nginx/html/index.html"]
CMD ["nginx", "-g", "daemon off;"]
subsitute.sh: (same as #Daniel West's answer)
#!/bin/bash
if [[ -z $1 ]]; then
echo 'ERROR: No target file given.'
exit 1
fi
#Substitute all environment variables defined in the file given as argument
envsubst '\$TEST \$UPSTREAM_CONTAINER \$UPSTREAM_PORT' < $1 > $1
# Execute all other paramters
exec "${#:2}"
Now you can run docker run -e TEST="set at command line" -it <image_name>
The catch was the WORKDIR, without it the nginx command wouldn't be executed. If you want to apply this to other containers be sure to set the WORKDIR accordingly.
If you want to do the substitution recursivly in multiple files this is the bash script you are looking for:
# Substitutes all given environment variables
variables=( TEST )
if [[ -z $1 ]]; then
echo 'ERROR: No target file or directory given.'
exit 1
fi
for i in "${variables[#]}"
do
if [[ -z ${!i} ]]; then
echo 'ERROR: Variable "'$i'" not defined.'
exit 1
fi
echo $i ${!i} $1
# Variables to be replaced should have the format: ${TEST}
grep -rl $i $1 | xargs sed -i "s/\${$i}/${!i}/Ig"
done
exec "${#:2}"
I know this is late but I found this thread while searching for a solution so thought I'd share.
I had the same issue. Your ENTRYPOINT script should also include exec "$#"
#!/bin/sh
set -e
envsubst '\$CORS_HOST \$UPSTREAM_CONTAINER \$UPSTREAM_PORT' < /srv/api/default.conf > /etc/nginx/conf.d/default.conf
exec "$#"
That will mean the startup CMD from the nginx:alpine container will run. The above script will inject the specified environment variables into a config file. By doing this in runtime yo can override the environment variables.
Update the CMD line as below in the your dockerfile. Please note that if runfile.sh does not succeed (exit 0; inside it) then the next nginx command will not be executed.
FROM nginx
COPY . /usr/share/nginx/html
CMD /usr/share/nginx/html/runfile.sh && nginx -g 'daemon off;'
nginx docker file is using a CMD commnd to start the server on the base image you use. When you use the CMD command in your dockerfile you overwrite the one in their image. As it is mentioned in the dockerfile documentation:
There can only be one CMD instruction in a Dockerfile. If you list more than one CMD then only the last CMD will take effect.
NginX image has docker-entrypoint.d included and on container start will look for any scripts located in there. You can add your custom scripts during docker build. I also found that if you are using alpine image, bash is not installed, so you can add it yourself by running:
RUN apk update
RUN apk upgrade
RUN apk add bash
sample DockerFile:
FROM nginx:alpine
EXPOSE 443
EXPOSE 80
RUN apk update
RUN apk upgrade
RUN apk add bash
COPY ["my-script.sh", "/docker-entrypoint.d/my-script.sh"]
RUN chown nginx:nginx /docker-entrypoint.d/my-script.sh
USER nginx
In order to limit scope execution of your custom script script, it's highly recommended to run your container as a non-privileged user.
nginx container already defines ENTRYPOINT. If you define also CMD it will combine them both like 'ENTRYPOINT CMD' in such way that CMD becomes argument of ENTRYPOINT. That is why you need to redefine ENTRYPOINT to get it working.
Usually ENTRYPOINT is defined in such way, that if you also pass CMD, it will be executed by ENTRYPOINT script. However this might not be case with every container.

How to run html file on localhost?

I have an HTML file and I run it on localhost. But, this file includes a mirror using a webcam. For example, how can I run this HTML file on localhost? Webcam starts in this example when checking to live checkbox.
You can run your file in http-server.
1> Have Node.js installed in your system.
2> In CMD, run the command npm install http-server -g
3> Navigate to the specific path of your file folder in CMD and run the command http-server
4> Go to your browser and type localhost:8080. Your Application should run
You can use python -m http.server. By default the local server will run on port 8000. If you would like to change this, simply add the port number python -m http.server 1234
If you are using python 2 (instead of 3), the equivalent command is python -m SimpleHTTPServer
If you are running Python3, you may want to instead try:
python -m http.server
See this answer.
Install Node js - https://nodejs.org/en/
go to folder where you have html file:
In CMD, run the command to install http server- npm install http-server -g
To load file in the browser run - http-server
If you have specific html file. Run following command in CMD.- http-server fileName
by default port is 8080
Go to your browser and type localhost:8080. Your Application should
run there.
If you want to run on different port: http-server fileName -p 9000
Note : To run your .js file run: node fileName.js
If you have Node.js installed then from the folder you want to share you can simply run:
npx http-server
To add CORS you can run:
npx http-server --cors
On macOS:
Open Terminal (or iTerm) install Homebrew then run brew install live-server and run live-server.
You also can install Python 3 and run python3 -m http.server PORT.
On Windows:
If you have VS Code installed open it and install extension liveserver, then click Go Live in the bottom right corner.
Alternatively you can install WSL2 and follow the macOS steps via apt (sudo apt-get).
On Linux:
Open your favorite terminal emulator and follow the macOS steps via apt (sudo apt-get).
As Nora suggests, you can use the python simple server.
Navigate to the folder from which you want to serve your html page, then execute python -m SimpleHTTPServer.
Now you can use your web-browser and navigate to http://localhost:8000/ where your page is being served.
If your page is named index.html then the server automatically loads that for you. If you want to access any other page, you'll need to browse to http://localhost:8000/{your page name}
You can try installing one of the following localhost softwares:
xampp
wamp
ammps server
laragon
There are many more such softwares but the best among them are the ones mentioned above. they also allow domain names (for example: example.com)
You can install Xampp and run apache serve and place your file to www folder and access your file at localhost/{file name}
or simply at localhost if your file is named index.html
You can also use PHP to server the files in http
make sure you installed PHP, run the below command to verify
php --version
if PHP is not installed run below command to install it
sudo apt install php7.4-cli
Once after the installation go to the file path and execute the below command in the terminal
php -S localhost:8000
just npx serve it's more compatible with esmodule

How can I create a "tmp" directory with Elastic Beanstalk?

I'm using Node.js and need to save files to a tmp directory within my app. The problem is that Elastic Beanstalk does not set the app directory to be writable by the app. So when I try to create the temp directory I get this error
fs.js:653
return binding.mkdir(pathModule._makeLong(path),
^
Error: EACCES, permission denied '/var/app/tmp/'
at Object.fs.mkdirSync (fs.js:653:18)
at Promise.<anonymous> (/var/app/current/routes/auth.js:116:18)
at Promise.<anonymous> (/var/app/current/node_modules/mongoose/node_modules/mpromise/lib/promise.js:177:8)
at Promise.emit (events.js:95:17)
at Promise.emit (/var/app/current/node_modules/mongoose/node_modules/mpromise/lib/promise.js:84:38)
at Promise.fulfill (/var/app/current/node_modules/mongoose/node_modules/mpromise/lib/promise.js:97:20)
at /var/app/current/node_modules/mongoose/lib/query.js:1394:13
at model.Document.init (/var/app/current/node_modules/mongoose/lib/document.js:250:11)
at completeOne (/var/app/current/node_modules/mongoose/lib/query.js:1392:10)
at Object.cb (/var/app/current/node_modules/mongoose/lib/query.js:1151:11)
I've tried several things such as an app-setup.sh script within .ebextensions/scripts/app-setup.sh that looks like this
#!/bin/bash
# Check if this is the very first time that this script is running
if ([ ! -f /root/.not-a-new-instance.txt ]) then
newEC2Instance=true
fi
# Get the directory of 'this' script
dirCurScript=$(dirname "${BASH_SOURCE[0]}")
# Fix the line endings of all files
find $dirCurScript/../../ -type f | xargs dos2unix -q -k
# Get the app configuration environment variables
source $dirCurScript/../../copy-to-slash/root/.elastic-beanstalk-app
export ELASTICBEANSTALK_APP_DIR="/$ELASTICBEANSTALK_APP_NAME"
appName="$ELASTICBEANSTALK_APP_NAME"
dirApp="$ELASTICBEANSTALK_APP_DIR"
dirAppExt="$ELASTICBEANSTALK_APP_DIR/.ebextensions"
dirAppTmp="$ELASTICBEANSTALK_APP_DIR/tmp"
dirAppData="$dirAppExt/data"
dirAppScript="$dirAppExt/scripts"
# Create tmp directory
mkdir -p $dirApp/tmp
# Set permissions
chmod 777 $dirApp
chmod 777 $dirApp/tmp
# Ensuring all the required environment settings after all the above setup
if ([ -f ~/.bash_profile ]) then
source ~/.bash_profile
fi
# If new instance, now it is not new anymore
if ([ $newEC2Instance ]) then
echo -n "" > /root/.not-a-new-instance.txt
fi
# Print the finish time of this script
echo $(date)
# Always successful exit so that beanstalk does not stop creating the environment
exit 0
As well as creating a file called 02_env.config within .ebextensions that looks like this
# .ebextensions/99datadog.config
container_commands:
01mkdir:
command: "mkdir /var/app/tmp"
02chmod:
command: "chmod 777 /var/app/tmp"
Neither seem to work. How can I create a tmp directory within my app that is writable?
I recently experienced the same issue with a .NET application where the application was failing because it couldn't write to a directory, even after I had set the permissions.
What I found was that after the whole .ebextensions process was completed, the final step was a web container permissions update which ended up overwriting my ebextensions permissions change.
To solve it I moved the directory outside of the web container and updated the application to write there instead.
In your case I would suggest /tmp
With the newer (current?) Amazon Linux 2 elastic beanstalk installs, setting up a Post Deploy hook is the way to make this happen. The tmp folder needs to be created and made writeable AFTER elastic beanstalk has moved the newly deployed app bundle to /var/app. It's just a shell script placed in the following location from the root of your app:
.platform/hooks/postdeploy/10_create_tmp_and_make_writeable.sh
#!/bin/bash
mkdir /var/app/current/tmp
chmod 777 /var/app/current/tmp

Categories