Basic Structure Done with Nx and Deployed on DigitalOcean App Platform

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
• DevDependencies
• Dependencies
• Basic App Structure with Themes
• Deployment on Digital Ocean Platform
• Logo Creation
• Link to App
• Next

NX Workspace

I created an nx workspace with angular-nest preset.

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:

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

For next questions:

? 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:

1. commitilint
2. husky
3. commitizen
4. stylelint
5. lint-staged

Dependencies

It's time to add dependencies:

1. Angular Material
2. Bootstrap.

Basic App Structure with Themes

I followed Custom Theme for Angular Material Components Series.

Code is available at:

shhdharmen / gitalytics

🐙 🐱 📊 Gitalytics - A simple overview of your Github activities

Deployment on Digital Ocean Platform

After following the first steps from announcement post: Announcing the DigitalOcean App Platform Hackathon on DEV!:

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
   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 and figma:

Let me know how it looks in comments.

Next

I have following things in mind:

1. Explore Github API
2. Add [ChartJS] with help from ng2-charts

Thanks for reading.

Happy Coding

🌲 🌞 😊