Clarification on preprocessors


#1

As far as I can tell, HyperDev has out-of-the-box support for ES6 and JSX. Does this mean we can write without adding Babel to package.json, until we download/export the project?

What about Jade, Sass, Less, etc.? Do we need the .scss extension? How do we indicate the syntax?


#2

Hi slim,

Here’s an example app from our gallery with Jade, Stylus, and CoffeeScript set up: https://hyperdev.com/#!/project/foul-raptor. Just ignore the tools that you don’t want to use, but it should illustrate the idea :slight_smile:

We currently serve applications using Node 4.4.3, so any ES6 features that that version of Node supports should work fine.

For Sass and Less files you should be able to create a new file with the appropriate extension and get an acceptable syntax highlighting, but please let us know if you find that any are missing.

You’ll need to add the appropriate packages in package.json and configure your app to process them. Following each package’s getting started guide should work out fine.*

* less-middleware currently runs into trouble with our read only filesystem, we’re investigating some possible solutions. :slight_smile:


#3

Did you manage to do it? I’m trying to figure it out from that example and the lean amount of info on NPM, but it’s not happening for me.


#4

@misterhtmlcss can you be more specific? I’ll try and help you if I know more about what exactly you are trying to do :slight_smile:


#5

Hi @DanielX

Thank you so much for offering! I’m just trying to keep using SASS rather than regressing to CSS while I use HyperDev.

So basically I’m not sure what I need to install for NodeJS (via the JSON dependencies) to make SASS work and whether I can install a gulpfile.js or not and how that would work. HyperDev in some ways is really foreign to me.

If I can get Sass to work then I can basically go about my business as usual e.g. Codepen like experience, but with the chance to slowly learn more backend stuff with the way you guys opened it up e.g. the JSON file (direct modifications) and the server.js (express file essentially) which is all new to me and so this is actually a super super great opportunity to become more familiar, but until I can use Sass it’s relegated to playing on weekends or evenings when I have time, because I need to be able to somewhat include it into my production workflow and I can’t without Sass. Make sense now? I just thought I’d lay it all down.

Currently I install Gulp.js and Sass (via Gem) and so I’m not familiar with the Sass (different library, different configuration) on Nodejs nor Express, so it’s the big stumbling block to a basic adoptions beyond playing and finding HyperDev to be ‘cool’, but of zero utility.

I think I’ve explained myself a few different ways - just wanted to limit your need to go back and forth with me. Sorry for being excessively wordy in doing it.

Thanks
@misterhtmlcss


#6

@misterhtmlcss I’d take a look at https://hyperdev.com/#!/project/dog-resonance, a template project with node-sass-middleware installed and set up. You should be able to remix it to get started using scss right away.

Hope this helps!


#7

Sweet! I’ll take a look as soon as HyperDev starts working again. Thank you @DanielX


#8

It worked! Thanks @DanielX :slight_smile: