CODEWITHSUNDEEP
cssgrailsgspurl-mapping
unfettered
unfettered

Reputation: 351

Grails not finding my resources

My Grails project structure:

my-app/
    grails-app/
        <mostly typical grails-app structure>
        views/
            web/
                index.gsp
            app/
            admin/
            layouts/
                main.gsp
    <rest of project structure is like any other Grails app>

So you can see whereas, normally, the index page is located at grails-app/views/index.gsp, I have it at grails-app/views/web/index.gsp.

My application.properties:

app.grails.version=2.4.2
app.name=my-app
app.context=/
app.version=0.1

One section of my UrlMappings.groovy:

"/"(view:"/web/index")

My main.gsp layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><g:layoutTitle default="MyApp"/></title>
    <g:resource dir="css" file="myapp.css" />
    <g:layoutHead/> 
</head>
<body>
    <g:layoutBody/>
    <g:resource dir="js" file="myapp.js" />
</body>
</html>

My index.gsp:

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
</head>
<body>
    <h1>Hello!</h1>
</body>
</html>

When the app starts up and I view it in a browser, it is obvious that myapp.css is not being found because the page styling is all wrong. When I view page source I see:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MyApp</title>

    /css/myapp.css
    <meta name="layout" content="main"/>
</head>
<body>
    <h1>Hello!</h1>
    /js/myapp.js
</body>
</html>

So it sounds like Grails takes your app.context and uses that as the prefix for all resources. And because I haven't wired something correctly, Grails is just translating my <g:resource> tags into plaintext and printing them out in the HTML.

I guess my question is: What do I need to do so that Grails can find my CSS/JS resources?

Upvotes: 1

Views: 1300

Answers (2)

Koloritnij
Koloritnij

Reputation: 1217

I don't sure that tag into tag will be work correctly, so write like this:

<link rel="stylesheet" href="${resource(dir:'css', file:'myapp.css')}" charset="utf-8"/>

Upvotes: 4

Dinesh Kumar Sarangapani
Dinesh Kumar Sarangapani

Reputation: 431

According to the Documentation, The resources tag generates a link (URI) string. Can be used in an href, JavaScript, Ajax call, etc.

Use the resources tag inside script or link tags to get your css/js loaded in your page like,

<link rel="stylesheet" href="<g:resource dir="css" file="myapp.css" />" charset="utf-8"/>

You can also use resources plugin, which I would recommend as it solves the purpose and has good documentation

Upvotes: 2

Related Questions