Sails.js Assets Not Found

Question

I'm creating a sails.js app. I'm running into a problem where it seems that every file included in the assets folder is not working. For example, I've created a testing123.js file inside the assets folder which only logs to the console a simple message. But the message is never logged. I have another file which is supposed to set rules for Jquery Validation. But validation on my login form isn't working. The CSS styling doesn't seem to be working either. When I inspect in Chrome and navigate to the Sources tab I looked at these files just to double check what was going on. To my surprise I found that every file in the Asset folder apparently has the same contents. Those contents are as follows:

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
    Stylesheets and Preprocessors
    ==============================

    You can always bring in CSS files manually with `<link>` tags, or asynchronously
    using a solution like AMD (RequireJS).  Or, if you like, you can take advantage
    of Sails' conventional asset pipeline (boilerplate Gruntfile).

    By default, stylesheets from your `assets/styles` folder are included
    here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
    are supported. In production, your styles will be minified and concatenated into
    a single file.

    To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
    For example, here are a few things you could do:

        + Change the order of your CSS files
        + Import stylesheets from other directories
        + Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS: Materialize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

<!--STYLES-->
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<!--STYLES END-->
<!--
    Client-side Javascript
    ========================

    You can always bring in JS files manually with `script` tags, or asynchronously
    on the client using a solution like AMD (RequireJS).  Or, if you like, you can
    take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).

    By default, files in your `assets/js` folder are included here
    automatically (between SCRIPTS and SCRIPTS END).  Both JavaScript (.js) and
    CoffeeScript (.coffee) are supported. In production, your scripts will be minified
    and concatenated into a single file.

    To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
    For example, here are a few things you could do:

        + Change the order of your scripts
        + Import scripts from other directories
        + Use a different preprocessor, like TypeScript

-->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript: Materialize -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript: JQuery Form Validation -->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/script.js"></script>
<!--SCRIPTS END-->
</head>
<body>
<div class="section"></div>
<main>
    <center>
        <div class="section"></div>
        <h5 class="indigo-text">Please, login into your account</h5>
        <div class="section"></div>
        <div class="container">
            <div class="z-depth-1 grey lighten-4 row" style="display: inline-block; padding: 32px 48px 0px 48px; border: 1px solid #EEE;">

                <form id="loginForm" class="col s12" method="POST" action="/CMD_User/login">
                    <div class='row'>
                        <div class='col s12'>
                        </div>
                    </div>

                    <div class='row'>
                        <div class='input-field col s12'>
                            <input class='validate' type='email' name='email' id='email'/>
                            <label for='email'>Enter your email</label>
                            <div class="errorTxt1"></div>
                        </div>
                    </div>

                    <div class='row'>
                        <div class='input-field col s12'>
                            <input class='validate' type='password' name='password' id='password'/>
                            <label for='password'>Enter your password</label>
                            <div class="errorTxt2"></div>
                        </div>
                        <label style='float: right;'>
                            <a class='pink-text' href='#!'><b>Forgot Password?</b></a>
                        </label>
                    </div>

                    <br />
                    <center>
                        <div class='row'>
                            <button type='submit' name='btn_login' class='col s12 btn btn-large waves-effect indigo'>Login</button>
                        </div>
                    </center>
                </form>
            </div>
        </div>
    </center>
</main>
<script src="/testing123.js"></script>
<!--
    Client-side Templates
    ========================

    HTML templates are important prerequisites of modern, rich client applications.
    To work their magic, frameworks like Backbone, Angular, Ember, and Knockout require
    that you load these templates client-side.

    By default, your Gruntfile is configured to automatically load and precompile
    client-side JST templates in your `assets/templates` folder, then
    include them here automatically (between TEMPLATES and TEMPLATES END).

    To customize this behavior to fit your needs, just edit `tasks/pipeline.js`.
    For example, here are a few things you could do:

        + Import templates from other directories
        + Use a different template engine (handlebars, jade, dust, etc.)
        + Internationalize your client-side templates using a server-side
            stringfile before they're served.
-->
<!--TEMPLATES-->
<!--TEMPLATES END-->
</body>

Any ideas on what might be making all of my assets files(js, css) have the same contents. And specifically why this html file? Thanks!

Let me know if you need further information.

Answer 1

You should provide the public path in .sailsrc file in root of your project.

{
  "generators": {
    "modules": {}
  },
  "_generatedWith": {
    "sails": "1.2.4",
    "sails-generate": "1.17.2"
  },
  "hooks" : {
    "sockets" : false
  },
  "hooks": {
    "session": false
  },
 "paths": {
    "public": "assets"
  }
}

Sails.js Assets Not Found

Question

1 answers

solution1
0 2022-07-07 09:37:53

Sails.js Assets Not Found

Question

1 answers

solution1 0 2022-07-07 09:37:53

solution1
0 2022-07-07 09:37:53