I have the Meteor app setup with such folder structure. I am not able to get the sass or scss file to create the appropriate css on its own and serve it to the client.
What should I do to make sass work as I prefer sass over scss.
Meteor supports less and stylus out of box my issuing meteor add less or meteor add stylus in your project root directory.
there is also a third party package repository (to be rolled into meteor core in the near future) on which you can find alternatives to many requirements.
For example, there is a third party scss package you can add to your project with meteorite add scss.
Now, the meteorite command here belongs to an npm package that interfaces your app to the atmosphere package repository as well as provide some deeper packaging structure to your app.
When you add the scss package, like in a typical meteor application your coffeescript, handlebars,jade,less,scss,javascript etc files will be compiled/bundled at deploy time and at each save afterwards and be placed in a hidden directory. So you will not be seeing your compiled css alongside your scss files, but the css will have been sent to the browser.
Related
I'm bundling a bunch of components I regularly use in apps I create with Next.js into an npm package to make it easier to reuse them between projects, however I'm having difficulty getting it to work.
The big issue I have is that some of my components need to import/require a configuration file from the project root directory (e.g. project/node_modules/mypackage/index.[js/jsx/tsx] needs to import/require project/config.[js/ts]) so I need to ensure the app is able to import components from the npm package, and the npm package is able to import/require from the app.
I use Typescript to compile the npm package (no Webpack or Babel) but I'm not sure what settings to use for target, lib, module and jsx, or if I'm able to just keep it uncompiled as .tsx and .ts files (I'm using the canary branch of Next.js which has built-in Typescript support).
I can't find any information in the documentation, here on SO or via Google search. Any advice?
Why do I have to install Node.js to work with Polymer? Just because of npm? Are there any other uses for Node.js in a typical Polymer project? Or is npm just used to install Bower, and Bower to install project dependencies?
Node.js is just use to create project files. create a polymer project you have to use the console polymer CLI.
once files are generated you don't need the CLI until new project or to modify the current one.
You don't need Node.js. You can download all the components you want (plus all their dependencies and polyfills) from Github yourself, and organize them in your project directory. You also don't need any project files if you're going that route.
If you want, however, to conveniently install the components and all their dependencies, you can use bower, or the more recent yarn, which use Node.js. Also, if you want to host your project on Github or similar, it's useful to just commit bower.json which contains a list of all the dependencies (and can then conveniently be installed after cloning the repo), instead of forking all of Polymer's code into your project repo.
Having this said, if all you need is Polymer itself without any of the web components Polymer provides, it's probably even easier to just download Polymer and the required polyfills yourself.
There are more uses for Node.js. You may want to use some packages in your Polymer project, such as Redux, which you can also just download yourself, or install using NPM/Node.
I tryed to use css frameworks lots of times. But i cant found any guide what to do. Just some post from other developers. Can you help me with the guide, how to import and use css framework in my expressjs project.
For instance, i started new project with express generator:
express --view=pug --css=sass
next, i installed materialize
npm install materialize-css
What i must to do next??? How to connect js and sass files with my project? How to compile all, if i tryed to do just a website? Where i can find good guides about such things, if i will have more questions?? Thanks!
npm was originally to get Node Module, but with the essort of the Javascript language (and the advent of browserify, webpack,etc), it has a bit grown up.
In fact, you can even download Bootstrap on npm, that is not a server side framework. Browserify permits you to use AMD/RequireJS/CommonJS on client side so node modules can be used on client side. Same goes for Webpack module bundler.
If you npm install bootstrap (if you don't use grunt or gulp file to move to a dist folder), your bootstrap will be located in some location like below.
"./node_modules/bootstrap/bootstrap.min.css"
You need to include this in your .html file.
For sass if you use grunt then you will be using this plugin grunt-sass to convert sass to css and add the destination file to the .html file. Similarly goes for gulp.
I know that could be multiple answers for this question but I would know how i can fast setting up project with Bootstrap and Sass.
I had never used node, npm, grunt or bower, I've installed all already but i can't really find a good tutorial for:
Setting up the project structure
Auto compile sass files on save
(Maybe) Live reload in chrome?
I would suggest not using any boilerplate for your first project as you want to get into the "guts" of it, and once you are familiar with basics, then you can try boilerplate and see what they can do for you.
Few tools you would need to setup a project from scratch includes: Node's npm, Bower, Gulp (for example).
After you have those installed, you can dig in into creating your first project.
1) Initialize your npm project
2) Pull the packages with Bower (Bootstrap scss for starters)
2a) Pull the Specific Bootstrap 3 SCSS port
3) Configure Basic Gulp-scss config for your SCSS needs.
Basic idea behind Bower is that you have unmodified source of plugins/3rd party js/css in bower_components folder, and you use those files to compile a production ready files (js/css). What this means is that your bower_components folder is a "src" folder, and you have to add your "dist" or distributable files. Gulp helps with this part.
For the project structure, further readings and improvements on gulp tasks.
Once you have basic working project, you can try expanding your gulp-config with, like you mentioned Browser Sync and others.
I did compile a "general tasks" gulp file that i use from project to project. You can take a look here and use it if you find it fits.
Hope it helps.
You can try using Aldryn's boilerplate:
https://github.com/aldryn/aldryn-boilerplate-bootstrap3
Documentation
I understand, in general, the most frequent way Grunt is used on Heroku -- load the buildpack, specify your grunt heroku task(s), and include any Grunt plugins you want to use on the Heroku dyno in your package.json:dependencies.
However, I find this to be a rather poor solution, because it miscommunicates about my app. My Grunt plugins are all more like devDependencies, as I will only run anything with Grunt one time (per deploy). My app doesn't directly depend on them to run, as it's mostly minification and template compilation.
I'm also trying to keep compiled files (e.g. .css and .html files when I'm writing in Sass and Handlebars) out of source control, so pushing them over from Github is possible but definitely not what I want.
Is there a way to do all of the following?
exclude .css and .html files from Git
write stylesheets and markup using Sass and Handlebars
push a basic Express app containing these files to Heroku
have Heroku run a server-relative version of my grunt build task (naming it whatever is necessary is fine) to compile and prepare all of the views and assets before launching the web: process
have Heroku's Grunt task intelligently understand that I just want some pre-launch compilation so it will look at devDependencies and install the relevant ones in a perhaps-temporary kind of way
launch the Express server via the web: process
I'm fine with having to write my own buildpack, or whatever needs to be done to do this (what I perceive to be) the right way.
I created the buildpack heroku-buildpack-webapp-client that supports grunt, compass/sass and installs your devDependencies. Maybe you can use this one or have a look at the bin/compile script to see how it works.