Full stack voting app
In this tutorial, we'll deploy a containerized full stack application to ReleaseHub. Our example voting application will allow users to vote for their favourite category, and then view the results of the votes. We'll use multiple stacks and frameworks for our app to illustrate the breadth and flexibility of deployments using ReleaseHub.
Our codebase will comprise of three services that will be containerized and managed by a
docker-compose file. Additionally, we will use Postgres as a database and Redis as a message broker, to offload some of the computational load to the worker service. Our services will be:- Vote: A frontend and some server-side code that will push the vote made by a user to Redis. This will be built in Python, using the Flask framework.
- Result: A frontend that uses a websocket API to poll data from its server-side implementation to provide real-time updates of votes. This will be a Node.js application that uses Express to serve an Angular frontend. The frontend will use Socket.IO to manage the websocket connection.
- Worker: The background task processor that reads from Redis and creates entries in our Postgres database to represent the results of the votes. The worker will be implemented using Java.
Our completed voting application will look like this:
And the result application will look like this:
Create a fork of the repository on your version control hosting provider (GitHub, GitLab, or Bitbucket). Ensure that the provider you fork the repository to is the provider you have integrated with ReleaseHub.
Once you have forked the repository, you can clone it to your development machine to get started.
You do not need to have the repository clone to deploy the application to ReleaseHub, but it is useful to be able to work through the code and understand the codebase.
Our vote application is a small Flask web app that accepts POST requests from the
index.html file it bundles and serves statically via a GET request to /.If you take a look at the
vote/app.py file, you should see the code below:@app.route("/", methods=['POST','GET'])
def hello():
voter_id = request.cookies.get('voter_id')
if not voter_id:
voter_id = hex(random.getrandbits(64))[2:-1]
vote = None
if request.method == 'POST':
redis = get_redis()
vote = request.form['vote']
data = json.dumps({'voter_id': voter_id, 'vote': vote})
redis.rpush('votes', data)
resp = make_response(render_template(
'index.html',
option_a=option_a,
option_b=option_b,
hostname=hostname,
vote=vote,
))
resp.set_cookie('voter_id', voter_id)
return resp
This code has a few responsibilities:
- When an HTTP request is received, we assign a voter ID to the caller, if one is not already present as a cookie on the request.
- If the HTTP request is a POST request, we connect to Redis, and push a JSON payload containing voter data onto a Redis queue called
votes. - If the HTTP request is a GET request, we simply return the
index.htmltemplate file, with a few parameters.
The most important parameters provided to our template are
option_a and option_b.option_a = os.getenv('OPTION_A', "Cats")
option_b = os.getenv('OPTION_B', "Dogs")
These are the categories that a user can vote for. If the environment variables for
OPTION_A and OPTION_B aren’t set, the default options will be "Cats" and "Dogs".The worker application is purely a backend service, written in Java.
On startup, it establishes a connection to Redis and the PostgreSQL database.
...
class Worker {
public static void main(String[] args) {
try {
Jedis redis = connectToRedis("redis");
Connection dbConn = connectToDB("db");
...
}
}
}
As part of the connection to our database, the worker application also creates the necessary database tables.
...
PreparedStatement st = conn.prepareStatement(
"CREATE TABLE IF NOT EXISTS votes (id VARCHAR(255) NOT NULL UNIQUE, vote VARCHAR(255) NOT NULL)");
st.executeUpdate();
...
It then watches the Redis queue called
votes for new items.while (true) {
String voteJSON = redis.blpop(0, "votes").get(1);
JSONObject voteData = new JSONObject(voteJSON);
String voterID = voteData.getString("voter_id");
String vote = voteData.getString("vote");
System.err.printf("Processing vote for '%s' by '%s'\n", vote, voterID);
updateVote(dbConn, voterID, vote);
}
When a new item is found, it calls a method called
updateVote, which handles writing the result of a vote to the PostgreSQL database.static void updateVote(Connection dbConn, String voterID, String vote) throws SQLException {
PreparedStatement insert = dbConn.prepareStatement(
"INSERT INTO votes (id, vote) VALUES (?, ?)");
insert.setString(1, voterID);
insert.setString(2, vote);
try {
insert.executeUpdate();
} catch (SQLException e) {
PreparedStatement update = dbConn.prepareStatement(
"UPDATE votes SET vote = ? WHERE id = ?");
update.setString(1, vote);
update.setString(2, voterID);
update.executeUpdate();
}
}
The result application, in a similar fashion to the vote application, serves an
index.html file via its / route.io.sockets.on('connection', function (socket) {
socket.emit('message', { text : 'Welcome!' });
socket.on('subscribe', function (data) {
socket.join(data.channel);
});
});
On startup, the result application establishes a connection to the PostgreSQL database.
async.retry(
{times: 1000, interval: 1000},
function(callback) {
pool.connect(function(err, client, done) {
if (err) {
console.error("Waiting for db");
}
callback(err, client);
});
},
function(err, client) {
if (err) {
return console.error("Giving up");
}
console.log("Connected to db");
getVotes(client);
}
);
Once a connection has been successfully established, it calls a
getVotes() function using the database client.This function reads the vote results from the database (which were written to it via the worker), and publishes them to a Socket.IO-managed channel called
scores.function getVotes(client) {
client.query('SELECT vote, COUNT(id) AS count FROM votes GROUP BY vote', [], function(err, result) {
if (err) {
console.error("Error performing query: " + err);
} else {
var votes = collectVotesFromResult(result);
io.sockets.emit("scores", JSON.stringify(votes));
}
setTimeout(function() {getVotes(client) }, 1000);
});
}
Our client-side code (anchored at
result/views/app.js) reads from the scores channel, and updates the result application’s frontend accordingly....
var updateScores = function(){
socket.on('scores', function (json) {
data = JSON.parse(json);
var a = parseInt(data.a || 0);
var b = parseInt(data.b || 0);
var percentages = getPercentages(a, b);
bg1.style.width = percentages.a + "%";
bg2.style.width = percentages.b + "%";
$scope.$apply(function () {
$scope.aPercent = percentages.a;
$scope.bPercent = percentages.b;
$scope.total = a + b;
});
});
};
...
Each of the applications described above are containerized using a
dockerfile in their respective directories. We can use docker-compose to coordinate and run our applications together, as well as run containerized versions of Redis and PostgreSQL.Below is the complete
docker-compose.yml file required to build and run our applications.version: "3"
services:
vote:
build: ./vote
command:
- python
- app.py
ports:
- "5001:80"
depends_on:
- "redis"
- "db"
result:
build: ./result
command:
- nodemon
- server.js
ports:
- "5002:80"
depends_on:
- "redis"
- "db"
worker:
build:
context: ./worker
depends_on:
- "redis"
- "db"
redis:
image: redis:alpine
db:
image: postgres:9.4
environment:
POSTGRES_HOST_AUTH_METHOD: "trust"
To run our project locally, ensure you have Docker installed, and run the following command in the root of the project:
docker-compose up
The vote application will be accessible via port
5001 on localhost, and the Result application will be available via port 5002.Once we’ve created the applications and set up our
docker-compose.yaml file, we’re ready to deploy our app to ReleaseHub.Ensure you’ve forked the repository before we get started.
On your ReleaseHub dashboard, click Create New App.
You will be taken to the Create Your Application screen. Click Connect to connect your Github repository to ReleaseHub.
Select the voting app repository and initiallize.
Once initialized, refresh your repositories by clicking the refresh button, and then select the forked version of the
example-voting-app repository from the dropdown list.Using the
docker-compose.yml file, ReleaseHub will automatically detect the services and their configuration.Finally, give your application a short but appropriate name. This will be used in your hostnames for the environment created.
Once you’re satisfied with the configuration, click Generate App Template.
Next you can modify the Application Template that ReleaseHub has generated. The Application Template describes the way your application works. For the purposes of this tutorial, it isn’t necessary to edit it, so click Save & Continue.
Lastly, before building and deploying our application to an environment, we have the opportunity to add build arguments, set environment variables, or configure Just-In-Time File Mounts. We don’t need any of these for the moment, so we can hit Start Build & Deploy.
After kicking off a build a deployment, ReleaseHub will build the applications from the latest commit on the master branch.
ReleaseHub will also create an ephemeral environment for the built applications to be deployed into.
The initial build and deployment shouldn’t take more than a few minutes, as ReleaseHub will build and publish our Docker images for us.
Once our environment has been set up, we should see a toast notification indicating that the deployment was successful.
We can view the details about our environment by clicking through to the Environments tab.
The detailed environment view will give us in-depth details about the environment, and the instances deployed into it. Additionally, it will tell us the hostname URLs with which to access the services.
We can click on the hostname URL for the vote application to tinker with making votes. You can share this URL with other people to vote, too.
To view the results in real time, you can navigate to the hostname URL for the result application.
Our default environment variables for
OPTION_A and OPTION_B were set to “Cats” and “Dogs”, but perhaps we’d like our users to choose between “Python” and “JavaScript”.To modify this, we can navigate back to our Application Dashboard, and click on our ephemeral environment.
From there click on the Settings tab and click the Edit button for the Environment Variables section.
From here, we can modify the environment variables for the environment. We will add two variables, for
OPTION_A and OPTION_B respectively, and then click Save As New Version and then click Apply.This will apply the latest configuration changes to our live environment, and redeploy it.
Once our deployment is complete, we should be able to navigate back to the vote application and see our new voting categories in action!
In this tutorial we’ve learned how to set up and deploy a non-trivial project with multiple services using ReleaseHub. We’ve also looked at how to configure databases using Docker on ReleaseHub. Additionally, we learned how to modify environment configurations, and redeploy afterward.
A good next step might be to create an environment specifically for a
development branch of the project, so that you can iterate on your project without impacting a production deployment.Last modified 2mo ago