Excerpt of Italian telephone area codes map

How to Build a Cloud-Hosted Vector Tiles Map Web App in React — Part III

App deployment

In this section we’ll be look at deploying our application to a cloud web application hosting platform, so that it can be publicly accessible without having the overhead to setup a web server. There are a number of cloud solutions available that offer this service, the two examples I will provide here are Amazon AWS Elastic Beanstalk (EB) and Heroku. The former offers a free access tier for 12 months while the latter is entirely free.

Deploy to AWS EB

There a various ways to deploy a web application to AWS, in this example we will use AWS web interface and will upload the production source code, there are a lot of methods to accomplish this task, for example with the EB CLI or building a pipeline from our local git repository to the AWS environment. This approach is probably the less automated but will help us to understand how AWS deploys the components of our code. When you feel you understood how a NodeJS application is managed in EB then you can consider using one of the alternative suggested methodologies

The steps we need to take are:

1. Build the production source code of our web app.
2. Create an EB Node environment and a web application with our own code.
3. Set the environment variables and deploy.

Build the production source code of our web app

In our package.json file we already have the script that will build and package our application and we already have our webpack configuration file. The build process will transpile the jsx files, include the javascript code in index.html and put the built application in the build folder. From server.js Express will serve the content of this folder as static files when we will request content from the site root. All requests to the /tileserver route will be handled by the server side taking care of tiling the json source files just as we did in development. The difference in production is that we no longer two web servers for client and server code but only one web server (offered by AWS EB) that will run both at the same time. In the terminal do a npm run build and check that the build folder gets populated with the production files. The Node environment in EB needs a command to start the application once it will be uploaded. Since we upload the already bundled code all we need to do is to call a node process on the environment to run our code in server/index.js. In our project root folder we create a process file containing the instruction to execute in the environment when the bundle will be uploaded. The file will be called Procfile and the content will be just a simple line.

web: node src/server/index.share.js

Create a Node.js environment and a web application with our own code

The next step consists of packaging our application using zip the root folder to be uploaded to EB, in Windows be careful to zip just the folder content otherwise sending the whole folder to the zip utility will create a zip folder with the root folder, such level of nesting won’t be the same expected by node and our application won’t build on the server. Provided that you already have an Amazon AWS account (if not you can set one up one here), access the AWS management console, at the search bar at the top of the page type “Elastic Beanstalk” and click the Elastic Beanstalk icon from the menu to access the EB configuration page. Click on the button on the right to create a new environment and when asked which environment tier we want to create select “Web Server Environment”. In this page we have to give our environment a name, I chose “S3VectorTiles-env”, we select Node.js as an environment platform and we give our application a domain, if we want. When asked which code we want to run in our application we select “upload your code” and we select to upload our code, which is the zip file we’ve just created, the upload will last a few minutes and if everything goes ok then your screen will look as follows.

Upload of user application code to AWS Elastic Beanstalk

Set the environment variables and deploy

Before running the creation process we will define the environment variables, click on “Configure more options”. This will open the configuration properties window, on the “Software” menu click on the edit button and scroll down to Environment Properties, here you will define your variable as in the image below, here you will paste the AWS credentials and settings we defined in part I of the tutorial. When done click on apply, the environment will take a few moments to update the set properties.

Definition of environment variables

Link to access our newly created application

Click on “Create environment” button at the bottom of the page to start the deployment process, the environment creation will complete after a while. When the process is finished we will see that EB created our environment and a sample application running on it. We can access the application clicking on the link highlighted in blue. If everything is ok you will be able to see the map displaying as the in image below.

Deploy to Heroku

As for Heroku, the free tier for app hosting is always free, no credit card details required. The web apps deployed in Heroku will run on Linux containers called dynos. The free tier Heroku plan will give us 1 web dyno with 512 MB shared memory across all apps we will deploy in that single dyno, for building a light-weight prototype like ours is more than ok. Also, free tier plan web dynos will go in “sleep” mode after 30 minutes of non-usage, if there is no web traffic on the app. Differently respect to the EB example this time we will use the Heroku CLI to create our web app.

The steps we need to take are:

1. Install the Heroku CLI and create a Heroku web app locally.
2. Set up the environment variables, push the code up to the Heroku remote and deploy the application.

Install the Heroku CLI and create a Heroku app locally

I find the Heroku documentation for setting up a web app particularly accurate, if something is not clear with my explanation I recommend you read this tutorial, we will use git to deploy our web app. According to your operating system there are different methods of installing the Heroku CLI, you can download it from here. Assuming your code is initialised as a git repository and you have logged in with the Heroku CLI heroku login, go with your terminal to the root folder level and type heroku create <optional: "name-of-your-app">. You can choose a name for your app, in case you don’t specify a name Heroku will give your app a default name chosen by Heroku. Creating an app locally with Heroku will automatically link it to a remote Heroku repository which will be the “launch pad” for our deployment later. If your app is in good shape and you can start it in development mode commit it to your local git repository, the committed version is the one that will be deployed to the Heroku environment.

Set up the environment variables, push the code up to the Heroku remote and deploy the application

We can setup our environment variables locally in out CLI, these values are passed on to the remote environment where we will run the web app and will picked up by the code. To set them up on the terminal type heroku config:set ENV_NAME=ENV_VARIABLE , so for our application what we need to set up are the following variables

heroku config:set AWS_REGION=your_region
heroku config:set BUCKET_NAME=your_bucket_namr
heroku config:set NODE_ENV=production
heroku config:set PORT=80
heroku config:set S3_ACCESS_KEY_ID=your_S3_access_key_id
heroku config:set S3_RESOURCE_NAME=name_of_json_file.json
heroku config:set S3_SECRET_KEY=your_S3_secret_key

Finally, we deploy our application just pushing our code to the Heroku remote repository, in your terminal at the root folder level do a npm push heroku master. The terminal will push the code up and run the command in the Proc file we defined earlier, it will work in Heroku too. The terminal will inform you on how the process is going and after a few minutes. If everything is deployed ok we will get the “build succeeded” message and the url where to reach our newly created web app, the result will be the same map we saw in the previous example.

Heroku app successfully deployed

Conclusion

First of all a big thank you for following this tutorial until the end. There are a lot of steps to follow but once you learned the process next time it will be easier to transform your thoughts into a publicly available space on the web. I also hope the explanations were clear and succeeded to let you appreciate how the single components work. A few more considerations have to be made on the tools I used and discovered. First of all the easiness of the vector tile server set up, geojson-vt is great, I can’t say yet how well it could work on a big scale projects but surely expressed its potential for this small application, which could be perfect to present quickly even complex spatial data. The second point I’d like to make is about the comparison between the two hosting platforms, AWS Elastic Beanstalk and Heroku. The first is one of the countless resources in the Amazon Web Services world. In case you wanted to expand your application or build bigger things it will be easier to find and arrange all the additional bits (Networks, VMs, storage, etc.) you will require, of course it will have a cost. As for Heroku instead what I really liked is the completeness and accurateness of its documentation, the real-free pricing tier for web app hosting and the easiness of use. If you need to build a simple web app without having particular prior knowledge in regards and you don’t want to worry about the potential costs this is the way to go. Hope you enjoyed this tutorial and see you soon.