Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dockerized the project #1

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
FROM node:lts-alpine

COPY package*.json ./

WORKDIR '/var/www/app'

RUN npm install --save express redis ejs dotenv

COPY . .

EXPOSE 3000

89 changes: 52 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,47 +1,62 @@
# redis-TODO-List
# A Simple To-do List using Docker

This is TODO List made using **Redis**, **EJS**, **Express**, **Node.js** and **Bootstrap 4**. Where you can write and delete any element that you want.
This is dockerized version of the [original app](https://github.com/VictorAlonsoCM/redis-TODO-List) that uses Node.js, Express, Bootstrap and Redis.
It uses Docker compose to build both the frontend and backend.

## Project preview
![Project preview](readme-images/website-preview.png)
<img width="1323" alt="Screen Shot 2022-04-21 at 4 05 40 PM" src="https://user-images.githubusercontent.com/313480/164441075-6e9fec0d-e762-41de-b91d-a234593f7bfb.png">

## Getting started:
If you want to view the web application in your computer, first you need to have Installed [NodeJS](https://nodejs.org/es/), second you will need to install a [Redis Server and CLI](https://redis.io/download), finally you will need to type the following instructions on your terminal inside the project folder
```shell
npm install
```
and then
```shell
node .
```
After these instructions, open your browser and go to the next url [http://localhost:3000/](http://localhost:3000/)

### Details about the project and code
---
* The server where the data is storage is Redis and it is saving the data in a list element.
* Using a Redis client we can write, read and delete the elements of the list.
* You can install the Redis client by using the following instruction:
```shell
npm install redis --save
```
* Use ``client.RPUSH('key', value)`` to insert a value to the right of the elements
* Use ``client.LRANGE('key', 0, -1)`` to get all the values of the list
* Use ``client.LREM('key', 0, 'value')`` to remove an element of the list by value
## Tech Stack

- NPM – a node package manager used for Node.js app development
- Node.js – our runtime for building web applications
- Express – a backend web-application framework for Node.js
- Bootstrap – a toolkit for responsive, front-end web development
- Redis – an in-memory, key-value, NoSQL database used for caching, data storage, and message brokering
- Docker Desktop – a suite of software-development tools for creating, sharing, and running individual containers


## Pre-requisite

- [Download and Install Docker Desktop](https://docs.docker.com/desktop/)



For **Redis** client declaration you can use the following instruction inside where you need it
## Bring up the application

```js
const client = redis.createClient();
We will be using `docker-compose` utility to bring up the app.

client.on('connect', () => {
console.log('Connected to Redis...');
});
```
services:

app:
build: ./
volumes:
- ./:/var/www/app
ports:
- 3000:3000
environment:
- REDIS_URL=redis://db:6379
- NODE_ENV=development
- PORT=3000
command:
sh -c 'node app.js'
depends_on:
- db

db:
image: redis
```


Bring up the app:

```
docker-compose up -d
```

## Accessing the app

Open https://localhost:3000 to see the todo-list app up and running.


### Dependencies used for this project are:
---
* body-parser: 1.18.3
* ejs: 2.6.1
* express: 4.16.3
* redis: 2.8.0
20 changes: 7 additions & 13 deletions app.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,29 @@
//Declarations
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const port = 3000
const redis = require('redis');

//Initialization of express
var app = express();

//Redis Client
const client = redis.createClient();
const client = redis.createClient({ url: process.env.REDIS_URL });


client.on('connect', () => {
console.log('Connected to Redis...');
});

//View engine
app.set('views'), path.join(__dirname, 'views');
app.set('view engine', 'ejs');

//Normalization of the elements used
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.use(express.static(path.join(__dirname, 'public')));

//This is our router
app.use(express.static(path.join(__dirname, 'public')))

app.get('/', (req, res) => {
var title = 'Redis TODO List';
var title = 'A Simple Todo List App';
var counter = 0;
client.LRANGE('todo', 0, -1, (err, reply) => {
if(err){
Expand All @@ -40,7 +37,6 @@ app.get('/', (req, res) => {
});
});

//Add messages on redis
app.post('/todo/add', (req, res, next) => {
var todo = req.body.todos;
client.RPUSH('todo', todo, (err, reply) => {
Expand All @@ -51,7 +47,6 @@ app.post('/todo/add', (req, res, next) => {
});
});

//Delete messages on redis by index
app.post('/todo/delete', (req, res, next) => {
var delTODO = req.body.todo;
var deleted = '__DELETED__';
Expand All @@ -64,9 +59,8 @@ app.post('/todo/delete', (req, res, next) => {
});
});

//Port listen of the app
app.listen(3000, () => {
console.log('Server Started at port 3000...');
});

module.exports = app;
module.exports = app;
19 changes: 19 additions & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
services:

app:
build: ./
volumes:
- ./:/var/www/app
ports:
- 3000:3000
environment:
- REDIS_URL=redis://db:6379
- NODE_ENV=development
- PORT=3000
command:
sh -c 'node app.js'
depends_on:
- db

db:
image: redis
31 changes: 20 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
{
"name": "redis-TODO-List",
"name": "todolist",
"version": "1.0.0",
"description": "Simple to do list",
"description": "A Sample Todo-List app",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"start": "node app.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ajeetraina/todolist.git"
},
"keywords": [
"Redis",
"ExpressJS",
"EJS"
"node.js"
],
"author": "Victor Contreras",
"author": "Ajeet Singh Raina",
"license": "MIT",
"bugs": {
"url": "https://github.com/ajeetraina/todolist/issues"
},
"homepage": "https://github.com/ajeetraina/todolist#readme",
"dependencies": {
"body-parser": "^1.18.3",
"ejs": "^2.6.1",
"express": "^4.16.3",
"redis": "^2.8.0"
"dotenv": "^16.0.0",
"ejs": "^3.1.6",
"express": "^4.17.3",
"redis": "^4.0.6"
},
"devDependencies": {
"nodemon": "^2.0.15"
}
}
Binary file added public/images/todo.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added todolist_app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions views/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://bootswatch.com/4/slate/bootstrap.min.css">
<title>Redis TODO List</title>
<title>A Simple ToDo List App</title>
</head>
<body>
<div class="container">
<h1 class="text-center"> <%= title %> </h1>
<img src="/images/todo.jpeg" class="center" width="300" alt="">
<form action="/todo/add" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="todos" placeholder="Send a message...">
<input type="text" class="form-control" name="todos" placeholder="Start typing and press Enter...">
</div>
</form>
<form action="/todo/delete" method="POST">

<% todo.forEach( (list) => { %>
<div class="alert alert-success">
<div class="alert alert-light">
<input type="checkbox" class="form-check-input mt-2" name="todo" value="<%= counter %>">
<h4 class="d-inline">> </h4> <strong><%= list %></strong>
</div>
<% counter++ %>
<% }) %>
<input type="submit" value="Remove" class="btn btn-primary">
<input type="submit" value="Remove from the List" class="btn btn-primary">
</form>
<br>
</div>
Expand Down
Loading