Basic Structure Done with Nx and Deployed on DigitalOcean App Platform
Tags: dohackathon, gitalytics
Published: 2020-12-18 10:42:51

---
title: Basic Structure Done with Nx and Deployed on DigitalOcean App Platform
published: true
description: My draft to the DigitalOcean App Platform Hackathon! - Part 2
tags: dohackathon, gitalytics
series: Gitalytics Digital Ocean Hackathon
---

In previous article, I pitched my idea to whole dev.to community 😅. In this I will give updates about current status and what's next.

## Setup Workflow

Instead of than going into much details, I am just going to highlight what I have done so.

## Table of Contents

- [NX Workspace](#nx-workspace)
- [DevDependencies](#devdependencies)
- [Dependencies](#dependencies)
- [Basic App Structure with Themes](#basic-app-structure-with-themes)
- [Deployment on Digital Ocean Platform](#deployment-on-digital-ocean-platform)
- [Logo Creation](#logo-creation)
- [Link to App](#link-to-app)
- [Next](#next)

### NX Workspace

I created an [nx](nx.dev) workspace with angular-nest preset.

```bash
npx create-workspace
```

The create-nx-workspace command will ask you to select a preset, which will configure some plugins and create your applications to help you get started. I selected `angular-nest`:

```bash
? What to create in the new workspace (Use arrow keys): angular-nest      [a workspace with a full stack application (Angular + Nest)]
```

For next questions:

```bash
? Workspace name (e.g., org name)     gitalytics
? Application name                    client
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com   ]
```

### DevDependencies

I added some utilities (or devDependencies) which helps to keep project files clean and follow a [standard commit message convention](https://www.conventionalcommits.org/en/v1.0.0/):

   1. [commitilint](https://commitlint.js.org/)
   2. [husky](https://typicode.github.io/husky/#/)
   3. [commitizen](http://commitizen.github.io/cz-cli/)
   4. [stylelint](https://stylelint.io)
   5. [lint-staged](https://github.com/okonet/lint-staged#-lint-staged----)

### Dependencies

It's time to add dependencies:

   1. [Angular Material](https://material.angular.io/)
   2. [Bootstrap](http://getbootstrap.com/).

### Basic App Structure with Themes

I followed [Custom Theme for Angular Material Components Series](https://indepth.dev/posts/1320/custom-theme-for-angular-material-components-series-part-1-create-a-theme).

Code is available at: {% github shhdharmen/gitalytics no-readme %}

### Deployment on Digital Ocean Platform

After following the first steps from announcement post: [Announcing the DigitalOcean App Platform Hackathon on DEV!](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k):

1. `npm i serve` - This will help run built files on server
2. Added a script in `package.json`: `"server:start": "serve -s path/to/dist -l tcp://0.0.0.0:$PORT -n"`.
   1. If you're also creating nx workspace, `path/to/dist` will be `dist/apps/<project-name>`
   2. If it's angular workspace, path will be `dist/<project-name>`
3. Go to your [DigitalOcean Apps](https://cloud.digitalocean.com/apps)
   1. Select your app
   2. Go to Components tab
   3. In Commands section, keep these 2 scripts:
      1. Build Command: `npm run build`
      2. Run Command: `npm run server:start`

After above setup, it ran my app successfully.

It's not ready yet, but you can have a look it at: <https://gitalytics-qeyb2.ondigitalocean.app/>

### Logo Creation

I created a simple logo using SVGs from [OpenMoji](https://openmoji.org/) and [figma](https://www.figma.com/):

![Gitalytics logo](https://dev-to-uploads.s3.amazonaws.com/i/y9iysyakgxivv6xrx2t4.png)

Let me know how it looks in comments.

### Next

I have following things in mind:

1. Explore [Github API](https://docs.github.com/en/free-pro-team@latest)
2. Add [[ChartJS](https://www.chartjs.org/)] with help from [ng2-charts](https://www.npmjs.com/package/ng2-charts)

Thanks for reading.

Happy Coding

🌲 🌞 😊