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:
Dependencies
It's time to add dependencies:
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!:
-
npm i serve
- This will help run built files on server - Added a script in
package.json
:"server:start": "serve -s path/to/dist -l tcp://0.0.0.0:$PORT -n"
.- If you're also creating nx workspace,
path/to/dist
will bedist/apps/<project-name>
- If it's angular workspace, path will be
dist/<project-name>
- If you're also creating nx workspace,
- Go to your DigitalOcean Apps
- Select your app
- Go to Components tab
- In Commands section, keep these 2 scripts:
- Build Command:
npm run build
- Run Command:
npm run server:start
- Build Command:
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:
- Explore Github API
- Add [ChartJS] with help from ng2-charts
Thanks for reading.
Happy Coding
🌲 🌞 😊
Top comments (0)