Okay, so you’re learning modern JavaScript using Node and perhaps some React sprinkled in. You’ve made something good in your local development and you want to put it up on a server. What will you do next?
There were simpler days where all you need is to just FTP your files to your server and then refresh the page.. Ah, the beauty of PHP. Sometimes I miss that. But no, with JavaScript you have to run the build step with concatenation, minification, uglification and transpile all those .js files into one big app.js file. I’m used to developing in Windows and then deploying to Amazon EC2 server running Linux OS — and believe me the first time I did it I was confused. Luckily I was a bit familiar with Linux because I had managed shared hostings using SSH.
If this stuff sounds familiar, you’re not alone.
We are all new to software development at one point in time, so instead of shaming someone just because they’re new, let’s write a thoughtful post that tries to help the situation.
Most blogs and tutorials assume some base level of knowledge about deploying your own code. So I will try to help out at that.
Development
For development in your local machine, you’ll need to install a browser, NodeJS and your text editor of choice. This will allow you to write code and test them without having to use live server. Node already includes npm, and developers tend to use npm start or node server.js which will look for .js file named server, which usually is responsible for running the app.
There are some useful npm modules for development, such as Nodemon, which will restart Node when your code changes, so you don’t have to CTRL+C and redo run command each time you make changes locally. For more information on local development, check out my more thorough guide at JavaScript Local Development Environment Guide.
Why do I need a server?
One thing you might note if you’re familiar with jQuery — isn’t JavaScript can run by itself without servers? I manipulate all those DOMs without a server, just index.html and script.js. My answer is that for full stack development — where both front and back end runs with JavaScript — then yes, you need Node server. However, modern JavaScript is more than one flavor. You can only use it for the front end and use another language for the back end (PHP, Go, Rails.. you name them.)
In that case, you’ll need to setup back end stack properly and then simply build the front end using build tools such as Gulp or Webpack. Laravel Framework is a perfect example to this, as it uses PHP in the back end and you can use Vue or React for the front end. There is also a third alternative, called the JAMstack which comes from the popular surge of serverless software architecture. So yeah, it depends on what you want to build.
This is just too much.. 🤯
I know. My advice is that if you’re new to JavaScript, you can start by learning how to develop with it first. Don’t worry about combining the stack with another programming language or making serverless app. You brain will explode if you try to learn it all at once!
Deployment to Production
Assuming you have a working app in the development machine, you’ll then need to deploy them to a production server for sharing your app to the whole world. The process will be different depending on what or where you put up the server, but in general, you might have a Linux machine (usually Ubuntu) that have Apache or Nginx server running. Whatever you’re using, please note you need to have SSH permission so that you can install NodeJS and npm dependencies on the server. If you’re using Gulp or Webpack You will then run a production build, which usually outputs everything into a dist or build directory. Also don’t forget to start the app to make it accessible.
Remember npm start or node server.js? Hit ’em up. There is also a free but very useful Node process manager for production servers named PM2, which gives you benefit such as monitoring, logging events and restarting node app when the server restart. I hope this post addressed some of the things developer community tends to left out in the dark.
I know this might be unspecific to your need, but then again, the objective of this post is to help you understand the difference between modern JavaScript development environment and the old ways of running PHP, Rails or Python. In order to show you more, I’m planning to create a basic tutorial of deploying a JavaScript app from localhost into a free production server. You can sign up to my newsletter to know when the tutorial is out.