I'm writing a program using laravel. To manage css and js, I used versioning and call it with a function like this
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
The code above produces html output as follows
<link rel="stylesheet" href="/css/app.css?id=53a226b301fc510ddf79">
When I upload to hosting, why does the above code only produce html like this ?
<link rel="stylesheet" href="/css/app.css"> (the mix-manifest.json / id file not load)
this is my localhost
and this is on the hosting
Did you run npm run dev after deploy it on your hosting?
Make sure in your webpack.mix.js have .version() method.
I think in your localhost your laravel run in development mode. And in the hosting the laravel run with production mode. Check your .env file.
Related
I'm using symfony 5 and I have no idea where can I pu my css, js, images files.
I read many posts about it but none helped me...
I tried:
composer require symfony/asset
symfony console assets:install
Here is the way i am using asset function in my twig files:
<link rel="stylesheet" type="text/css" href="{{ asset('css/base.css') }}">
And yes I have a file at public/css/base.css...
But when I inspect the result page, my line is replaced by:
<link rel="stylesheet" type="text/css" href="/css/base.css">
Did someone have any idea ?
Best regards,
If you're NOT using webpack (or webpack encore), your assets should be in your public folder which is the root of your public project. For example, if you have a file called style.css in public/css/style.css, you can access it in your browser with the url (assuming you use a local server started in the public dir) http://localhost:8000/css/style.css.
The Symfony asset component goal is to guess if your project is in a subdirectory and therefore to resolve the correct path. In order to use it in a Twig template with the previous imaginary file :
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
The asset function will be able to produce the right path for your file.
If you're using webpack, the setup is a bit harder so if you don't I won't explain it here.
Let's say that I've done a good bit of update to my css files on my dev machine (with my browser set to ignore the cache, no always seeing updates right away).
In this question and other places, I've seen the approach of adding a version number to the links:
<link type="text/css" href={% static "/path/mystyles.css?version=2" %} rel="stylesheet">,
which is fine, but on the dev machine, I get an error in the console, and the file isn't found:
GET http://127.0.0.1:8000/path/mystyles.css%3Fversion%3D2 net::ERR_ABORTED 404 (Not Found)
I've read that perhaps collectstatic will fix it on the dev side, but there's an ominous-looking warning:
You have requested to collect static files at the destination
location as specified in your settings:
/patttthhhhh/static
This will overwrite existing files!
Are you sure you want to do this?
What will happen when I run collectstatic? Where will it get files from to overwrite those?
The recommended way would be to use something like django-compressor (usage) or the likes to process your CSS into a single file and then bake a hash into the filename or dir. So that way your asset would become /mystyles.beb23fe.css.
What ended up working easily was changing the format of the version tag:
<link type="text/css" href="{% static '/path/mystyle.css' %}?version=2" rel="stylesheet">
instead of:
<link type="text/css" href={% static "/path/mystyles.css?version=2" %} rel="stylesheet">
Is fine in dev and production.
My dev server is running on node live-server. My prod will be a LAMP server.
I have normalize.css inside my node_modules server.
In my index.html I have
<link rel="stylesheet" href="/node_modules/normalize.css">
<link rel="stylesheet" href="css/styles.css">
I don't want files linked to node_modules directory.
I want something like
<link rel="stylesheet" href="css/normalize.css">
Is this doable? I have lot of other css and js files like this.
Update 1
Let me clarify, this app is not a node app nor a php app, It has only html, css and js files. Everything runs on client side, But.. we want to leverage the latest client side dev tools for JS and CSS and upload the final build to prod server.
There are lots of possible solutions. I can suggest using a task runner(gulp) which will copy these static files to a public directory like dist/assets.
Install gulp on your machine
npm install --save-dev gulp
Create a gulpfile.js file in your root directory with following code.
var gulp = require('gulp');
gulp.task('default', function () {
gulp.src('/node_modules/normalize.css')
.pipe(gulp.dest('./dist/assets'));
});
Run gulp
gulp
Update your index.html as below
<link rel="stylesheet" href="/dist/assets/normalize.css">
Please go through the documentation of Gulp for more information
You can also try Grunt or Webpack
You could use Webpack for bundling, which would copy css resources to the dist and replace references to it. It doesn't support html files as entry points though, so you'd need to work around that by probably using html-webpack-plugin.
anyway, as was mentioned by others - server decisions are weird.
I am using grunt build to copy files from production to build. While working I am using local bootstrap css, however in build I need CDN url to be replaced for bootstrap.
<!--build:css http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- endbuild-->
First of all is this possible? Grunt build is giving error for http path while using usemin.
Thanks.
Got temporary solution to this.
My grunt build was perfect except http:// url for bootstrap. So i used --force (grunt build --force) command to build my project.
This gave me warning but build the project as per my requirements and CDN url for bootstrap.
I'm having troubles with calling stylesheets and javascript via asset() function..
my app is running on dev enviorment so the url is - dproc.local/app_dev.php/
The base.css is in /src/Dproc/Resources/views/Dproc/css/base.css
<link href="{{ asset('/css/base.css') }}" type="text/css" rel="stylesheet" />
Doesnt work.
How should my link have to be? I didnt understood how asset() function works..
Thanks
You need to run the command
asset install --web
so that the asset files are copied to web folder.