SCSS with Gomix?


#1

Hi guys,

I was wondering if anyone would be so good as to help me through the process of using SCSS with Gomix? I am really new to all this and frankly I have no idea what I am doing. On JSFiddle I was able to just select a preprocessor from a dropdown.

Also, on JSFiddle adding libraries and frameworks just involved copying a URL from cdnjs.com and adding it to the ‘External Resources’. How do I go about achieving the same thing on Gomix? Does it have something to do with the packages.json file?

Thanks an apologies for the long, needy post :stuck_out_tongue:

Cheers


#2

Hey rorm, because gomix is lower level than jsfiddle, you can get scss working with by adding the express-sass-middleware package to package.json and following the instructions in https://www.npmjs.com/package/express-sass-middleware

Alternatively you can use https://gomix.com/#!/project/node-sass as a reference or starting point for a project using sass


#3

Thank you so much my man, I will have a look at this tomorrow. Appreciate you!


#4

No prob , let us know if you need more help later


#5

Thanks :slight_smile: I am a bit overwhelmed trying to understand it all at the moment. I need to get an overview of how the Javascript stack works (like: Where does client-side stop and server-side begin? How do they interface? What exactly is middleware? etc.,)

All the introductions to the topic that I have seen expect some level of familiarity with the fundamental concepts. At this stage I can’t even get a good enough grasp of it to be able to ask the right questions. It’s fun to be learning something new, though!


#6

Hi rorm,

everyone has the same feeling when approaching the world of JavaScript… I had the same experience! Hopefully, Gomix will give you a playground to experiment and iterate fast, to learn more quickly :slight_smile:

From 10000 feet: “client-side” is the javascript that is run on your browser. Your browser loads an html page, which has <script> tags in it: the client-side JS script.

“server-side” is anything that is run on the server, and you have to imagine that, on server-side, JS can be replaced with any other language that you already know: Python, C#, Java…

This said: one of the roles of the server-side JavaScript is to actually send the data to the browser. If you open a new fresh project, you will see that the main responsibility server.js is to create “app routes”: app.get("/", function (req, res) { ... });.

That line means: when a browser goes to / (i.e.: https://your-app.gomix.me/), the function specified will be run, that will use the res parameter as the response object.

A great thing that Node provides, and in particular the express library that we use in the welcome project (and in the node-sass project that Pirijan suggested), is the concept of “middleware”. You can tell your server to “do something” before serving a request. Imagine a middleware as a sort of “off-the-shelf” route.

This is what the sass-middleware does: when the client (the browser) requests style.css, the sass middleware checks if it can find a style.scss file in the /public folder. If it does, it compiles it to CSS on the fly and serve the CSS file to the browser :slight_smile: .

I don’t know if this is the level of help you were looking for… but I hope it helps a bit :slight_smile:

If you have any further question, don’t hesitate to ask!


#7

Hey Etamponi,

Thank you so much for a detailed reply. Your explanation of how the sass-middleware would work makes things a lot clearer for me. I wonder though… how do you decide which parts of your application should be server-side vs. client-side? I understand that it is possible to write apps that are completely client-side, so what would be an example of a situation in which I would need to use Node as well?

Thanks again for your help and apologies that I am a bit late in replying.

All the best,


#8

Hi rorm,

the idea that an app can be completely “client-side” creates more trouble, as it’s often a marketing point of a lot of services around the Web (you can find a lot of services that claim to be “serverless”). This is… not completely true.

When you connect to a website, there is always a server that sends you the html page that you will load. When a service claims to be “serverless”, it typically means that all the details of this server (that always exists) are completely abstracted from you, and all you have to do is to copy some files in a remote directory, and those files will be served for you.

I hope this is clearer now :slight_smile:

Gomix provides you full control on both the “server” and the “client” side. Now an additional bit of clearness: in the Gomix editor you see your files split in “back-end” and “front-end”. But there is no magic going on, actually: all those files are in the server. The split just tells you: if you put a file there, what you probably want to do with it will be executed on the client (the browser). So the split doesn’t tell you where the files are (since they’re all in the server), but where the files will be executed.

On the other hand, the files that you see in the “back-end” section will only be executed in the server, the client will never get them and execute them.

Let’s take an example: views/index.html. That files lives in the Gomix server, at /app/views/index.html. See? It’s in the server. But you see it in the “front-end” section. Why? Because it will be executed by your browser: the Node server that lives in server.js will send the content of that file to your browser.

On the other hand, let’s look at what server.js contains. It is a very simple Node module which is executed on the server (back-end), and what does it do? It creates an HTTP server using the express library.

How do you decide what to execute in the client and what to execute in the server? Well, simply respond to these questions:

  1. which information should be saved after the user closes the browser? Anything that you run client-side is bound to that particular view, and with some tricks, to that specific browser and computer. For example: login information cannot be kept in the client-side, since if the user switches computer, all her details get lost!

  2. is this information “secret”? If you don’t want to share some information with the user, you cannot send it to the browser! So it has to stay on the server side (e.g.: the password to access the database of your web application…)

  3. what is faster, to compute something on the server, or on the user’s computer? Modern browsers can compute a lot of things very fast, but this doesn’t mean that you have to do all of the heavy lifting on your user’s computers! Some computation can be done on the server (see, again: server-side just means “this file is executed on the server”, not "this file stays on the server), and then the result can be sent to the user.

I hope I didn’t make things more complicated :slight_smile: To summarize, the concept is very simple:

server-less is a lie. You will always have a server. All the files you see in the Gomix editor are on… a server.

back-end files are executed on the server. E.g.: a database, an http server…

front-end files are executed on the browser. E.g.: index.html, public/client.js. These files are on the server, they are sent to the browser and executed there.

The minimum thing that should be on the server is an http server, that is responsible of sending files to the browser to be executed. See server.js on a base Gomix project.

The minimum thing that should be on the “client-side” is an html page, that the browser will load to execute further stuff (mostly JS scripts).

Additional things on the server-side: a database, advanced computations, secrets.


#9

Hello,

I remixed the express-sass-middleware project and used it for the base of my new project. One reason I prefer sass is I don’t have to type brackets and semi-colons, but when I remove them from my file it no longer works and renders the page with no styling. Any idea why this would be happening?


#10

A brilliant reply that I was sure I had responded to(!) Thank you so much for your help with this, it helped me a great deal! All the best to you :smiley: