Building Snapp

This page will go over how the project is structured and what is needed in order to build it. This guide will only cover the basics and explain how to build it out-of-the-box.

IMPORTANT! If you only want to build Snapp in order to deploy it, just go over to this release and download Snapp-v2.0.0.zip. This file contains the already built application. Once you have it go over to the deployment guide.

TL;DR

• Install node & npm
• Clone the repository
• Install all project dependencies: npm install
• Build everything: npm run build
• All the compiled code and resources are found in build/

1. Obtaining the code
2. Installing Node.js & npm
3. Downloading dependencies
4. Angular & Typescript
5. Building
6. Deploying

1. Obtaining the code

If you want to build the project, the first step is to get the code on your computer. Preferably use git to clone the repository. Alternatively just download the entire project as a .zip file from GitHub. Always get the latest tag from the master branch as the master branch may sometimes contain WIP and older versions will not be maintained in any way.

2. Installing Node.js & npm

The entire build process is based around node and npm. If you know how to use these tools just make sure that you have a recent version installed, install the dependencies and skip to the next step.

Npm gets installed automatically during the installation of Node.js, the installation process will vary slightly depending on your OS, but a good place to start looking would be Node.js' download page. Make sure that you install the Current - Latest Features version.

If you never used npm it's strongly advised that you check out the npm docs before starting.

3. Downloading dependencies

The build process has several dependencies. These are all defined in the package.json file found in the project root directory. Npm will manage them all for us.

Open your preferred shell and navigate to the project root directory. Once there, execute the following command:

npm install

This may take a while as it will download all of the project dependencies.

Once the process finishes we will see a new folder in the project root directory, node_modules. Inside this directory you'll see be a bunch of other directories, these are all the dependencies.

4. Angular & TypeScript

This section is only necessary if you want to learn a little bit more about the build process, if you just want to build the project skip to the next step.

All of the code is written in Typescript, therefore it needs to be transpiled to JavaScript. This is done by the TypeScript compiler (tsc), which we have downloaded in the last step by using npm. The compiler needs to be configured correctly, this is usually done by including a tsconfig.json file in the project. As this project contains both client and server code, and they have different needs, there are two files in the project root directory, client-tsconfig.json and server-tsconfig.json.

The server code does not need any more than the TypeScript compiler. The client code though needs a little extra help. We use webpack to take care of the building process. Webpack has also been downloaded by npm and also needs a configuration file to work properly, webpack.config.js. As webpack's configuration is somewhat more complex, its configuration is defined across several files in the conf directory and the main file only imports it.

5. Building

At this point we have everything in place to build the project. The package.json file has several scripts defined that automate the process. Most scripts are only useful if we are modifying the code and only want to build a subset of it. If we want to build everything we only need one command:

npm run build

Once all tasks have finished executing we will have the entire project correctly built and structured in the new build directory.

6. Deploying

Once we have correctly built the application we can deploy it on some machine, to see how please go over to this page.