I am building a Symfony 5 app and want to use CSS inside my twig templates. My stylesheet is at public/css/styles.css and so I try to use it in my twig template with the line <link href="{{ asset('css/styles.css') }}" rel="stylesheet" type="text/css"/>. This works locally but once I deploy it to the Google Cloud Platform the server can no longer find it. The console shows a 404 error when trying to find the stylesheet. Where does Symfony want me to put my css files?
This feels like it should be very simple but I'm totally at a loss and feel like I'm missing something stupid. The documentation only really talks about Encore and that seems like such overkill for using a single CSS file in a twig template.
(sorry i cant comment because low reputations, thatswhy i need to take an answer)
At first, the location of your css is correct. Also the usage of your link tag looks fine. Now the question is: what is the correct error message, or better where looks the browser to your file?
I think the browser want to take your file from root, not from public folder. If you can answer this with yes, you have to check your .htaccess file and/or linking from webspace to startfolder (public) in this cause.
It works in localhost because the symfony dev-server take this work for you.
Got the CSS working. I think what did it was telling app.yaml to put the css in the public folder.
handlers:
- url: /css
static_dir: public/css
Then instead of loading using the asset() function, I included the css with:
<link href="/css/styles.css" rel="stylesheet" type="text/css"/>
That way, the css folder I had in public locally was put in public when deployed to the GCP.
Related
I am trying to use a single HTML stylesheet that I've created between multiple apps script web app projects. I have the HTML stylesheet hosted on an external site but cannot figure out the code to include that external stylesheet into my apps script projects.
I've currently got it working with the following code in my Index.html file:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= include('stylesheet') ?>
The include function calls:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
And my stylesheet is a separate HTML file in my Apps Script.
This all works well, but I'd like to have a central repository elsewhere (I've read that I cannot link to an Apps Script file in another project) for my stylesheet so that whatever changes I make will update to all of my Apps Script projects automatically.
To do this, I've uploaded my stylesheet.html to a website and have taken the link that points to the file (i.e. http://www.test.com/stylesheet.html) and tried to do the following without success:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
I've placed this in the head element of my Index.html file, and I also tried it above the head element. Neither worked.
I've also tried to just use the include function that worked as mentioned above and modify my stylesheet.html to be blank except for:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
None of this seems to work, wondering if anyone else has any thoughts on how this might be possible.
Host CSS file in Google Drive
Create a .css stylesheet file and host it on Google Drive.
Change the uploaded file permissions to publish it on the Web.
Now copy the published file ID and use it to build the following URL:
https://drive.google.com/uc?export=view&id=FILE-ID-GOES-HERE
Now include the generated URL to your HTML page using the <link/> tag in this way:
<link rel="stylesheet" href="google_drive_link_goes_here">
Reference
Host CSS or JS file on Google Drive
I'm currently using CSS in my Twig templates. The CSS is in my public folder and templates are in the templates folder.
So the following code is working actually :<link rel="stylesheet" href="assets/libs/css/style.css">
Here comes the problem. I created a sub directory in the templates folder but when I try to access to the CSS like before; Symfony don't find my CSS file.
I fixed this issue by using ../ before the href so I have this :<link rel="stylesheet" href="../assets/libs/css/style.css">
My problem is solved at this point but I want something more generic than ../ because if I have some folders inside a folder which is inside the templates folder I would have something like that ../../../ and it's really ugly.
So I am currently looking for a generic way to access to the public folder no matter where I am in the templates folder.
If my question isn't clear enough I know how to do this in Blade with {{ URL::to('/') }} so in Blade my code would have been like that : <link rel="stylesheet" href="{{ URL::to('/') }}/assets/libs/css/style.css">
Symfony has a twig function for what you want as part of the Asset-component. If you use Webpack Encore you will likely already have this installed otherwise you can install it via composer:
composer require asset
This should create a default configuration for you and you should be able to use the following in your templates:
{{ asset('/assets/libs/css/style.css') }}
As the docs for Linking to CSS, JavaScript and Image Assets state:
The asset() function's main purpose is to make your application more portable. If your application lives at the root of your host (e.g. https://example.com), then the rendered path should be /images/logo.png. But if your application lives in a subdirectory (e.g. https://example.com/my_app), each asset path should render with the subdirectory (e.g. /my_app/images/logo.png). The asset() function takes care of this by determining how your application is being used and generating the correct paths accordingly.
I have multiple scss stylesheets in client/ directory. I have one particular page that is being rendered server-side and being served statically without Meteor app (it is email unsubscription confirmation).
I want to load my main site css bundle on this page.
For this objective everything I need is just a text contents of this bundle or even better an absolute path. Problem is, Assets.getText() access only private/ directory.
However, Meteor knows about this bundle file path on server side as it serves it with index.html somehow.
Is there a way to do it by myself?
If I understand the question correctly, from looking through https://github.com/meteor/meteor/blob/devel/packages/webapp/webapp_server.js, I can get mine like this:
path.join(
path.dirname(
path.join(
__meteor_bootstrap__.serverDir,
__meteor_bootstrap__.configJson.clientPaths['web.browser']
)
),
"merged-stylesheets.css"
)
on the server side. Change web.browser to web.cordova for the mobile version.
But if you want to include it on the static page, you can probably also just go like this:
<link rel="stylesheet" type="text/css" href="/merged-stylesheets.css">
depending on how you are serving the static page
The accepted answer only works in development. In production the css filename is a hash, e.g. facc2661135083eeff000051c65e72e2ad910050.css instead of merged-stylesheets.css.
This works for me in development AND production:
let cssPath = __meteor_bootstrap__.serverDir.replace('/server','/web.browser');
cssPath += "/"+fs.readdirSync(cssPath).find(file => file.slice(-4)==".css");
FYI, I'm using this server-side to pre-render with above-the-fold css: https://forums.meteor.com/t/pre-rendered-landing-pages-with-critical-css/50626
I have a rails app I put my index.html in public folder and it shows when i go to port 3000 but it doesn't show it with css, I have my css folder and i tried putting it into assets stylesheets but nothing is happing? where do i put my folder with all the css files in it? would i need to change the way my index.html referances my css files?
for now my index.html in public folder references the css files like this <link href="css/styles.css" rel="stylesheet">
i've looked into some tutorials but their a bit complex in understanding
Things put in the public folder won't be processed by the asset pipeline. This isn't the "rails way" at all, but you can just move your .css to your public folder and call it like you're calling it now.
To gain access to the asset pipeline the quickest way I can think of is to just scaffold generate something, fill in the view with your HTML and then you can call via asset pipeline. However by default the root route isn't set so you'll have to navigate to localhost:3000/whatever-controller-you-generated-here
I highly recommend reading this guide before you go much further http://guides.rubyonrails.org/
First of all if you are using rails then why are you using static page like this. If you really want to use this then you have to specify stylesheet like this
<link href="/assets/application.css" rel="stylesheet" />
I have Less CSS working with my Django site in local development. Everything looks fine. I'm including the files as follows:
<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}less/base.less">
<script src="{{ STATIC_URL }}js/less-1.1.3.min.js" type="text/javascript"></script>
However, when I deploy the project to Heroku, Less CSS inexplicably doesn't work. What do I have wrong?
I know for a fact that I have static media set up properly: I can download base.less and less-1.1.3.min.js from the correct paths just fine.
Note: I realize that it's best to compile and minify my .less files for production, but this is just a staging server for development purposes.
Note 2: If you know how to add compilation of Less CSS to the Heroku deployment process, without having to install node.js, I'd be interested in learning how to do that in addition to my main question..
The problem is that less.js loads the .less stylesheets through XHR, which doesn't work unless you set the appropriate Access-Control-Allow-Origin header, which S3 doesn't permit (https://forums.aws.amazon.com/thread.jspa?threadID=34281).
As a workaround some people have suggested setting up an HTTP Proxy, which adds the necessary header. (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) and (http://zefer.posterous.com/pure-html-ajax-solutions-to-upload-files-to-s)
Otherwise, you're going to have to compile the .less files to CSS, as less.js isn't going to work.
Of course, another alternative (which I use), is to simply deploy the static files to an Apache server, and not host them in S3.
Take a look at https://github.com/nigma/heroku-django-cookbook
It makes use of the post_compile hook provided by heroku-buildpack-python to install nodejs and lessc.