Deploy Your First Application in Glitch.

#glitch #application #beginners #node

Glitch is one of free platform, that can help you make your application online. Glitch give us 1000 hour per month, more than we need more for deploy one application.

Start coding

For this tutorial, we will make a simple counter application.
All required module:

Filesystem (fs)
Web server (http)

Note: Make sure you have installen fs module. If you don't have it installed, you can install by run this command:

npm install fs

Make a file named index.js, and fill with this code:

// Adding required module
const http = require('http');
const fs = require('fs');

// For development, use 4040
const port = 4040

// Set limit
const limit = 10

// Run server
server = http.createServer(function (req, res) {
    fs.readFile('counter.txt', 'utf8', function (err,data) {
        if (err) {
            return console.log(err);
        }

        // Check if page view(s) is less than limit
        if (limit > parseInt(data)) {
            // If the page view(s) is less than limit
            res.end(`Hey, this page view(s) is ${data}! Can this page reach ${limit} views?`);
        } else {
            // If the page view(s) is more or same than limit
            res.end(`Hey, this page view(s) is ${data}! Yay, the page views is reach ${limit}!`);
        }

        // Add +1 to the counter file
        fs.writeFile('counter.txt', parseInt(data) + 1, 'utf8', function (err) {
            if (err) return console.log(err);
        });
    });
}).listen(port)

Create also the file that named counter.txt. You can fill it with 0, or any number that you like.

Finnaly, let's run our app. Type this command:

node index.js

Then, fire up your browser (you have fire up it, LOL), then open http://localhost:4040.

Voilà! Your app runned!

I try refresh that for ten times. The text will change.

Coding, check.

Moving to Glitch

At first, you need to register and create an account at Glitch, after that, open your dashboard and create a new project (select glitch-hello-node option). You can delete all the files, except package.json and .env. It's ok if you wan't to keep the file to.

After that, back to the editor, we need to modify the port, so our script can work with Glitch.

Modify port variable value (line 7) to this:
process.env.PORT

So, the 7th line will look like this:
const port = process.env.PORT

Save the changes, upload the index.js and counter.txt to your Glitch project. The file structure will looks like this:

We need to edit the package.json file. Maybe this is the hardest part from this tutorial. So, be careful. At first, we need to change the script, with our index.js file. Replace "start": "node server.js" with "start": "node index.js". After that, we need to add some module that we need. You can add it by simply click "Add package" button