DEV Community

loading...

Basic Structure Done with Nx and Deployed on DigitalOcean App Platform

shhdharmen profile image Dharmen Shah ・Updated on ・3 min read

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

I created an nx workspace with angular-nest preset.

npx create-workspace
Enter fullscreen mode Exit fullscreen mode

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)]
Enter fullscreen mode Exit fullscreen mode

For next questions:

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

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:

GitHub logo 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:

Gitalytics logo

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

🌲 🌞 😊

Discussion (0)

pic
Editor guide