I just did a fresh installation of sails (v0.11.0) in my server and after checking this up and working on controllers I found that css, js and templates files included into the assets folders are not being injected to the layout, if there any reason for this to happen? I mean, it is a clean fresh sails installation....
In my quest to get SailsJS to auto-inject stylesheets into the layout file under views/layouts/layout.handlebars in my case, I've found out a couple things...
When you first create your sails app using:
sails new APPNAME --template=handlebars --verbose
note: link below explains above syntax...
Using handlebars templates in Sails.js
Go to config > views.js
It will say:
layout: 'layouts/layout.handlebars'
change to:
layout: 'layouts/layout',
Go to tasks > config > sails-linker.js
Because I'm in development mode right now I will Ctrl + f searching for:
"devStyles"
devStyles: {
options: {
startTag: '<!--STYLES-->',
endTag: '<!--STYLES END-->',
fileTmpl: '<link rel="stylesheet" href="%s">',
appRoot: '.tmp/public'
},
files: {
'.tmp/public/**/*.html': require('../pipeline').cssFilesToInject,
'views/**/*.html': require('../pipeline').cssFilesToInject,
'views/**/*.ejs': require('../pipeline').cssFilesToInject
//ADD HANDLEBARS INJECTION HERE
}
},
Notice it has .html, & .ejs types being injected but not .handlebars
add this line:
'views/**/*.handlebars': require('../pipeline').cssFilesToInject
where I commented:
//ADD HANDLEBARS INJECTION HERE
At this point you should be able to drop a .css file into assets > styles and have it auto-copied to .tmp/public/styles
run:
sails lift
in your command prompt and give it about 20 seconds or so to have the stylesheet manifest its style on whatever page you have in your routes.js
'/': {
view: 'index'
}
As you can see, I made a new .handlebars file index.handlebars and set it as my root level page. You may have to refresh the page a time or two to get the newly auto-injected CSS to show.
P.S. It appears there is no more need to append --linker when first creating a SailsJS project. Also fyi, I'm using sails version 0.11.0
Also if you run sails lift --verbose the line below is how you know the .handlebars injection is working
verbose: Grunt :: File "views/layouts/layout.handlebars" updated.
Hope this helps!
Also, when adding Handlebars Helpers they should go in a file helper.js which should be located in config > helper.js
At the top of the helper.js file I found I had to require handlebars as follows
handlebars = require('sails/node_modules/express-handlebars/node_modules/handlebars');
Related
I'm using scss to style my next.js app however I noticed that all styles are missing when I preview the first paint via the network tab in google chrome.
As you can see the page is fairly simple and does not fetch any initial props. I'm suspecting that the server is for some reason not building the whole page (including styles) on the backend.
My next.config.js setup is:
const withStyles = require("#webdeb/next-styles");
module.exports = withStyles({
sass: true, // use .scss files
modules: true, // style.(m|module).css & style.(m|module).scss for module files
});
With newer nextjs versions, I don't think you need to use withStyles and similar plugins anymore.
global styles only
You can just:
install sass
install whatever css framework you're using and follow their instructions for how to include their css / scss files in your project
potentially get rid of your next.config.js file entirely if it's a simple project and all you had in the config file was css configuration stuff.
import your scss files directly into your js files (eg import '../styles/app.scss')
scoped scss styles
seems you can keep the next.config.js file, based on this workaround I found here through a google search:
const withStyles = require('#webdeb/next-styles')
module.exports = withStyles({
sass: true, // use .scss files
modules: true, // style.(m|module).css & style.(m|module).scss for module files
})
I'm doing a webpage with Vue (Vue-bootstrap) and I'm having problems to make it works. I'm uploading the content of the dist folder after using npm run build, the project was started using `vue init bootstrap-vue/webpack my-project. I've tried to add a vue.config.js file with the next information:
module.exports = {
baseUrl: './',
//...
}
I've try several times adding this in different folders before build it but I can't make it work.
The result just show the footer, it is in:
http://thegraph.es/Citython/
and the code without this vue.config.js is in the next link:
https://github.com/MGijon/Citython/tree/master/web
Metalsmith portrays itself as a ridiculously simple static site generator. I'm trying to write the most basic of sites just to get myself familiar with the basics of the software, but I can't seem to get even that to build. Here's my folder structure:
|- build/
|- index.js
|- src/
|-index.html
|- templates
|-index.hbt
My index.js file:
var Metalsmith = require('metalsmith');
Metalsmith(__dirname)
.destination('./build')
.build();
My index.html file:
---
title: Home
template: index.hbt
---
And my index.hbt template:
<!doctype html>
<html>
<head>
<title>FOO</title>
</head>
<body>
something
</body>
</html>
My understanding is that the build command should look through the src directory and parse any file it finds with that YAML stuff at the top. So it should look at index.html, see that it renders using the templates/index.hbt template, and basically just move the file into build/index.html. But when I run node index.js I get absolutely nothing. No progress indicator, no "Done building your stuff!" message, just a blinking command prompt line. My build directory is empty. Obviously something is breaking, but there are no logs to check, and no status messages to google. What am I doing wrong? Shouldn't there be at least one page created in the build directory?
Found the answer, in a comment on a tutorial, of all places: https://blog.robinthrift.com/2014/04/14/metalsmith-part-1-setting-up-the-forge/. It's also on the github examples: https://github.com/segmentio/metalsmith
According to those links, you need to include an error callback on the .build() function:
Metalsmith(__dirname)
.build(function(err) {
if (err) throw err;
});
In addition to the error callback issue, which you've already identified, I think you're missing a few things in your files. True, Metalsmith is very simple, but its simplicity means that a lot of the functionality (like support for templates) is brought by modules that you need to install and include explicitly.
You say the content of your index.js file is:
var Metalsmith = require('metalsmith');
Metalsmith(__dirname)
.destination('./build')
.build();
Is that everything you have in you index.js? If you want to use Handlebars templates, you need to explicitly add the metalsmith plugin that handles templates, and instruct it to use handlebars:
var Metalsmith = require('metalsmith');
var templates = require('metalsmith-templates');
Metalsmith(__dirname)
.destination('./build')
.use(templates('handlebars'))
.build();
And make sure that you install the metalsmith-templates and handlebars modules from npm.
Also, you probably know this, but in your index.hbt, you'll need to change
<title>FOO</title>
to
<title>{{ title }}</title>
in order to load the title metadata from index.html.
Let me know if this gets you going, or if you need more help.
I installed grunt-bower module and followed up the below link:
https://stackoverflow.com/a/22456574/194345
but still not able to access js or css files placed in assets folder.
I installed jquery with bower which is in "assets\lib\jquery\dist\jquery.js" but in browser, tried following URL to access it:
http://localhost:1337/js/jquery.js
http://localhost:1337/lib/js/jquery.js
http://localhost:1337/lib/jquery/dist/jquery.js
it always displays not found.
What is the correct path?
I think you may not have fully implemented the solution from the link you posted, specifically the part about configuring the grunt-bower task. I've edited that otherwise excellent answer to be a but more clear--you need to wrap the configuration in a function and save it as tasks/config/bower.js:
module.exports = function(grunt) {
grunt.config.set('bower', {
dev: {
dest: '.tmp/public',
js_dest: '.tmp/public/js',
css_dest: '.tmp/public/styles'
}
});
grunt.loadNpmTasks('grunt-bower');
};
Then, next time you lift Sails, jquery.js will be copied to .tmp/public/js and therefore be available at http://localhost:1337/js/jquery.js.
I have a Sails.JS application with Angular.JS front-end.
The angular files are stored in /assets/linker and they are injected properly on start. My issue is that when I change css or js file from assets the change doesn't appear on the server, the loaded js file is the same as when the server started. I tried to clear my browser cache and tried in another browser, but still the same.
I also tried to run the application with forever -w and nodemon, but still nothing. The application is in dev mode, anyway starting with sails lift --dev does not solve the issue neither.
I have feeling that I miss something in configuration. Is there any way to force reloading of assets?
You need to check your Gruntfile configuration. It's where the magic happen in term of linker and livereload.
Specifically, you'll need to look at the watch task and the related tasks.
By default it looks like this :
watch: {
api: {
// API files to watch:
files: ['api/**/*']
},
assets: {
// Assets to watch:
files: ['assets/**/*'],
// When assets are changed:
tasks: ['compileAssets', 'linkAssets']
}
}
I found the problem. I made the Angular.js structure with angular generator
which adds not only the js structure, but also karma test environment containing shell and bat scripts, karma framework and more.
Building sails application with all these files in watched folder is breaking the refresh functionality. There's no errors in console and nothing in the running application, but the files from assets are not reloaded anymore.
Tip of the day: be careful with the files you have in assets and take a look what does generators generate!
I came here looking for livereload, after a little search
Live Reloading
Enabling Live Reload in Your HTML
in current version of Sails v0.10 there is a file for watch task: tasks/config/watch.js