Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:40 minutes
Babel 1
  • Overview
  • Transcript

2.2 Babel on the Server

While it is possible to write ES6 today with Node v0.12 and the --harmony flag, it is not always possible to update your server, and it might require lots of testing of existing code. To get around this, we can run Babel on the server too! In this lesson, we'll find out how to do so, and we'll even write a bit of isomorphic ES6 code that runs on both the server and the client.

1.Introduction
1 lesson, 02:53

Free Lesson
1.1
Introduction
02:53

2.Getting Started
2 lessons, 14:42

Free Lesson
2.1
Babel on the Client
08:43

2.2
Babel on the Server
05:59

3.Experimenting With ES6
3 lessons, 18:09

3.1
Classes
04:40

3.2
Generators
05:34

3.3
Other Cool Stuff
07:55

4.Conclusion
1 lesson, 04:28

4.1
Conclusion
04:28


2.2 Babel on the Server

Hi, my name is Jason Green, and welcome to this short course on Fullstack ES6 with Babel. In this lesson, we're going to get set up to run ES6 in the server. Now given that most of the time you are in control of the software that runs on your server. You could run the latest version of Node, use the Harmony flag, and you'll be able to run ES6 already in the server without using any kind of supplementary tools. For example if we start using node 12 and run node with the harmony flag, then we can already start running ES6, and create a valid function using arrow function syntax like this. But sometimes you're not in control of the software running on your server. Or you may have a legacy application that's making use of a lot of node modules and even your own code, that may break if you move from node 0.10 to 0.12. So using just the stable version of node 10, Babel can help us to run this latest code on the server, as well. So back to our project folder, we're going to start by creating a new file called server.js in our project folder. Server.js is going to become the entry point for the server side part of our application. So, I'm gonna change main here to server.js. Now, to run Babel in the server I'm actually going to move it from a dev dependency and make it a fully fledged dependency since node will be using it in the run time. Next we're going to add express to our dependencies as well. npm install --save express. Okay, and there it is. Now our server.js file is going to be really simple. All we need to do is require babel/register. And then we're going to require the rest of our application. So, the first file in which you require babel/register, you can't actually write any ES6. You can only write it in further files that are required by that file. So we're using server.js as a proxy file to load in the rest of the application, which we're going to put into our lib folder, the app.js file. So we're just gonna create a simple express app here that serves up our HTML file on localhost port 9000. So we'll include express, create a new express app, and we're going to create http server out of that app. Now we can tell the app that anybody hitting the root directory of the domain will get served up static files. And we're gonna point that at dist, now we can tell the server to listen on port 9000, and just to test that our babel is really working, we can put in an arrow function that console.logs App. So now, if we run node server.js, you'll see its console logged app started. Which means that it's correctly interpreting the ES6 syntax, and if we go to localhost:9000 we're being served up babel starter kit, and we can see that the client side code is running. So just before we finish up, I wanted to show you how you could write some portable or isomorphic ES6 code. Now there are lots of uses for isomorphic code. But one of the most obvious ones that springs to mind is validation. Data validation is something we need to do in the front end, to give users immediate feedback. But it's also something we need to do in the back end. In the old days, you'd have to write your validation code two times. If you were using PHP on the server, you'd have to write it in PHP, and then you'd have to write matching JavaScript code for the client. We're going to create a new folder and call it portable, and inside portable, I'm going to create a new index file. And this file is going to export a function called validateId. Now let's suppose that when somebody creates a new ID and some kind of database UI, they need to make sure it always begins with the characters USER_. This is obviously a silly and trivial example, but it's just to give you an idea. So this function can return true or false if typeOf ID equals a string and id.indexOf, and we'll use a constant here, ID_PREFIX should equal exactly 0. So our ID_PREFIX can be of USER_. If we want to use this function in the server, we can just quite easily include it like this. We can include our portable utilities with a standard require, going back one folder and then to portable. We can then test function like this, iso.validateID and we'll parse in USER_12345. So if I run node server again, and you can see I've made a typo here. It should be typeOf. So if we run it again you'll see that we printed out true, and then app started. If we go into our client code and do the same thing, and we have to go back two folders from here. Then we can console.log iso.validateId, and this time we'll pass in something wrong. And of course, we don't need to restart the server but we do need to run gulp, so that it builds that change. And then when I refresh, you see it printed out false. So that's how skeleton applications set up to run ES6 in both the client and in the server, and even allow us to write portable ES6 compliant code that can be reused between the two of them. In the next couple of lessons, we're going to be exploring some cool ES6 features. Ciao.

Back to the top