Deploy Your First Application in Glitch.
Tags: glitch, application, beginners, node
Published: 2021-07-12 00:42:23

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.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpb0ninma00gftm92grp.png)
Voilà! Your app runned!

I try refresh that for ten times. The text will change.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6bwxgdcaos1nntjlizi.png)

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:
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozkgz7keawz2atogl282.png)

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

![This is the button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce0ujqr16ba0lmmoipvc.png)

After clicking, a form will appear. Click the input with "search npm for packages" text, and type "express".

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3sxmcqwe6s9o8p16tbsl.png)

Click the first result. Do the same way, and add the `fs` package. 

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euv1t0k7fiipzzzt21ur.png)

Select the second one, and we done. You can see the result by press the refresh button (the second button from left).

![Refresh button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjojikn79oliky8z9wqp.png)

That is our project today. Hope you enjoy the project. Bye!