Skip to main content

Local Development Setup

Before jumping in, trying out app, fixing bug, and writing features, familiarize yourself with these libraries and frameworks that we use internally

Libraries, frameworks, and tools​

  • React — This is the primary building blocks of our site. We like its explicit data flow which makes developing features quicker and debugging clearer. Sure, community was nice and big, but its programming model is what we believe in.
  • React Native Web — We use this for our styling framework because it solves major issue in managing style at scale which is automating specificity and style deduplication. On top of that, this provides us with great abstraction for building apps like FlatList
  • Next.js — One of the best server-rendered framework for React.
  • Express — Minimal node.js http framework, which is exactly what we need, given this only handle small part of the request response lifecycle.
  • Typescript — This is the type system that we choose in our project. Your code still works without it, but it helps a lot in catching bugs and documenting your code.

If you're looking for which JavaScript knowledge will be most useful to you when developing, check out this blog post. We're also using a lot of React hooks in our framework, make sure you read this great explanation of useEffect hook.

Software requirements​

To run services locally, you'll need to have these dependencies installed:

  • Golang v1.x.x — Used to run some auxiliary services (e.g. the proxies).

    brew update
    brew install golang

  • Node.js v20.x.x — For our main app.

  • Pnpm v10.0.0 — We use pnpm because we rely on its advanced features such as workspaces to manage our micro packages in monorepo, so this is not something that's optional.

Dependency installation​

After you cloned the repository, running pnpm install in root repository will install all dependencies and setup linking between packages.

# clone and change directory
git clone git@github.com:traveloka/www.git www
cd www
# setup & install dependencies
corepack enable
pnpm install

Due to how pnpm workspaces works, most of the dependencies should be hosted to root node_modules, especially shared dependencies like @traveloka/core and @traveloka/web-components

ls node_modules/@traveloka

Running the sample app​

When you're done with the installation, you can check our sample app by running dev proxy (pnpm dev) and visiting the sample page URL:

pnpm dev

There would be a few things that you might notice. First, the app start right away, this is because by default, it doesn't really do much. It only acts as a reverse-proxy simulating real load balancers in the production environment.

Lastly, when you visit /sample, we build the page on demand. This is also done to speed up start time and prevent unnecessary delay that comes from prebuilding entire asset even though you might not need them. Next time you're testing new routes, you can be sure resources in your machine are optimized properly.