Deploying a TypeScript, ExpressJS app into ElasticBeanstalk NodeJS server

When people creating a new NodeJS project, let’s say using ExpressJS, the source code in default is JavaScript.
However, what if you prefer TypeScript to keep the source code more consolidated? For example, type checking.

In that case, the source code we would like to manage in GIT will be TypeScript (.ts), instead of JavaScript (.js).

By writing source in TypeScript, we may test the localhost by one of two ways below:

  • Run localhost directly by ts-node without compiling from TypeScript (.ts) to JavaScript (.js)
  • Compile the code (in TypeScript) to JavaScript first and run as normal. For example: node ./server.js

Options

It looks fine in your localhost, however, to deploy the project into ElasticBeanstalk (NodeJS), it may be tricky.

If you use default configuration to deploy, only code managed by GIT, it means TypeScript, will be deployed to the server. Here, to solve this problem, we have at least 4 options below:

  1. Compile the code in localhost (or CI)to get .js files, and add a .ebignore to let EB deploy the .js files.
  2. Manage both .ts and .js files in GIT.
  3. Compile and deploy separately. Means we will compile the code into a separate place, i.e., dist , copying other needed files, i.e., package.json, public, views…, and deploy that directory dist.
  4. Customize the .ebextensions to compile the source code on ElasticBeanstalk side before the run.

Solution

The solution 1 looks like the simplest one, however, when using it I met error with zip process , which keep raising error Timestamp before 1980.

Solution 2 is not clear and not a good solution. It makes the source code hard to manage and leads to confuse in commits, because not only .ts files change, but also .js files change.

Solution 3 is complicated and request us to find some way to automate it somehow: compiling before deploying, copying necessary files, and must custom the scripts (maybe).

Solution 4 is the best for me, why?

  • GIT manages TypeScripts, the source code we write only
  • Not mess up with the localhost compilation
  • Not many configurations needed

Steps

Assumes that you already set up an ElasticBeanstalk Application & Environment for NodeJS app. What we need is Compiling:

  • After the source code deployed (into EC2) and package **installed
    ****npm install**
  • Before npm start (or anything else in NodeCommand)

What we need to do is simply add a config file into .ebextensions , i.e., the source_compile.config file below:

# source_compile.config
container_commands:
  compile:
    command: "./node_modules/.bin/tsc -p tsconfig.json"
    env:
      PATH: /opt/elasticbeanstalk/node-install/node-v10.15.3-linux-x64/bin/

The configure tells the EB to compile the nodejs source code in /var/current/application by command tsc .

The key we need to notice is the env, which enable node to be exposed in the PATH.

Remember to have the module typescript in the dependencies of your package.json file. It will provide the tsc in ./bin directory of the node_modules after typescript installed.

"dependencies": {
  .......,
  "typescript": "^3.4.5",
  .......  
}

If there is no specific outdir in your tsconfig.json file, the compiled .js files will be generated in the same location of the .ts files after command executed.

In conclusion, to write the source code in TypeScript and deploy it to Elastic Beanstalk, simply add few lines of configurations to compile the code before Node server running will help to solve our problem.

P/s: When taking note this Typescript app Elastic Beanstalk deployment, I found a similar article which may help you. Please reference to https://www.errietta.me/blog/typescript-circleci-aws-beanstalk/

References

https://medium.com/@lhviet88/deploy-a-typescript-expressjs-into-elasticbeanstalk-nodejs-server-8381e00e7e52

Related Posts

How to setup CesiumJS to use in ReactJS, Webpack, and Typescript

Officially, at this moment, we cannot simply add CesiumJS as a normal module into packages.json and use it directly as other libraries such as `lodash.` Instead, to use CesiumJS in your React project

Read More

Deploying a TypeScript, ExpressJS app into ElasticBeanstalk NodeJS server

When people creating a new NodeJS project, let’s say using ExpressJS, the source code in default is JavaScript. However, what if you prefer TypeScript to keep the source code more consolidated? For

Read More

Ultra Notes, a simple note taking Chrome extension built with Svelte

The journey began when I sought a straightforward note-taking app for my everyday needs. Several months ago, I experimented with various online note-taking platforms for work. However, my boss, upon

Read More