Intro
This is a very basic example of how to make use of Glitch. It is a service that allows developers to host their websites for free! If you've used glitch then you can skip this part, but for beginners part here's a few things to note about glitch.
- You can host static html pages.
- You can also a nodejs project.
- Use postgreSQL to store your data.
Head To Glitch. When you're done you will see your dashboard and you can load in a default project provided on creation of an account. You can easily create a new project. Their UI is that good, everything is simple and guides you easily. Within minutes you will feel at home using the website. When you create a new project ensure you pick the sample node js project you should see a project with the following directory structure in your browser
Root--------------/assets
|----------/public
|----------/views
|----------.env
|----------Readme.md
|----------package.json
|----------server.js
The assets folder should hold all our assets like fonts, images etc. The public folder holds our custom css and javascript files. The views folder holds the template that will be rendered to the user.
The .env file is for hiding certain variables that we don't want others to see in our server side code and we can still use it in the server like other variables. The Readme.md file contains some information about the app.
The package.json is used for tracking and installing dependencies, there's a search box on it that allows one to easily search and add a new dependency, very easy again. You should go ahead and install express, bodyParser and ejs we'll be using them.
The server.js is where we write our server side code.
It is important that you already know how to use nodejs and express, bodyParser and eja for templating because i wont focus on how to use them.. The goal of this tutorial is to utilize glitch in running our server side code. Now we have installed those dependencies, you can open up your sever.js and clear out everything and lets start creating a basic server.
let express = require('express')
var bodyParser = require('body-parser')
const app = express()
//setting our view engine to ejs
app.set('view engine','ejs')
app.get('/', (req, res)=>{
res.render('index')
})
We need to create a home view that the server will render when we make a request to it.
Inside the views directory, create a file and name it index.ejs, now fill the file up with the following content
<!DOCTYPE html>
<head>
<title>Simple Glitch Nodejs Server</title>
</head>
<body>
<!-- Basic form to collect user data -->
<div>
Add a Todo
<form action="/" method="POST">
<input type="text" name="todo" id="todo" placeholder="Add a todo" />
<input type="submit" value="Add Todo" />
</form>
</div>
</body>
Lets edit our server so that we can handle the post request. Add the following code to your server
var urlencodedParser = bodyParser.urlencoded({extended: false})
app.post('/', urlencodedParser, (req, res)=>{
//do anything with data
res.send(JSON.stringify(req.body))
})
app.listen(3000)
//glitch listens on port 3000
So we are done and we can see this server in action by clicking the eye glass icon and open our live code in a new tab. Back at our editor, we can open up logs to see our console log. Do check out Glitch for more info, hope this was simple and straight foward
Top comments (0)