A playground for orbital visualizations, calculations, and experiments

Try it out !! https://datumgeek.github.io/orbital-eye/e02

• OrbitalEye
  • Building Orbital Eye
  • Running Orbital Eye Samples
• Orbital Eye Recipe
  • Create GitHub Repo
  • Install NodeJS LTS
  • Create Nx Workspace
  • Install nx globally
  • Run it
  • Add remote
  • @orbital-eye/e01-visualize Docs
  • @orbital-eye/e02-visualize Docs
• Publish orbital-eye App to GitHub Pages
  • 1. Prerequisites
  • 2. Install gh-pages Package
  • 3. Update Next.js App for Static Export
  • 4. Add a Deploy Script to package.json
  • 5. Set Up GitHub Repository
    • Create Empty gh-pages branch
  • 6. Build and Deploy to GitHub Pages
  • 7. Verify Deployment
  • 10. (TODO) Automate Deployment
• Automated Daily Data Updates with GitHub Actions
  • Overview
  • Key Features
  • How It Works
  • Workflow File
  • Setting Up
  • Running the Workflow
  • Security Considerations
• Nx Stuff
  • Integrate with editors
  • Start the application
  • Build for production
  • Running tasks
  • Set up CI!
  • Explore the project graph
  • Connect with us!

• @portal-eye/e01-visualize Sample
• @portal-eye/e02-visualize Sample

Try it out !! https://datumgeek.github.io/orbital-eye/e02

Investigate the Implementation

See the platform: Comcast "Porrtal" Open Source Project

Try it out !! https://datumgeek.github.io/orbital-eye/

Investigate the Implementation

Try it out in Porrtal Open-Source IDE-Like UX https://datumgeek.github.io/orbital-eye/portal/

Investigate the Implementation

• https://github.com/datumgeek/orbital-eye.git
• Readme

• https://nodejs.org

npx create-nx-workspace

npm install -g nx

cd orbital-eye
nx dev orbital-eye

• http://localhost:3000

git remote add origin https://github.com/datumgeek/orbital-eye.git

Investigate the Implementation

Investigate the Implementation

Publishing the orbital-eye Next.js app from an NX monorepo to GitHub Pages involves additional considerations because Next.js apps are dynamic by nature, but they can be exported as static websites using the next export command. Below is step-by-step guide:

• Ensure your app is fully static (no server-side processing or services).
• You have a GitHub repository set up for your project.

Install the gh-pages package to simplify deployment to GitHub Pages:

npm install --save-dev gh-pages

1. Open the next.config.js file in your Next.js app directory (apps/orbital-eye).
2. Add the trailingSlash, basePath, assetPrefix and output properties to the configuration.
3. After you publish, comment out the basePath, assetPrefix and output properties for nx dev orbital-eye local development

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  trailingSlash: true,
  // uncomment these for gh-pages deployment
  basePath: '/orbital-eye',
  assetPrefix: '/orbital-eye',
  output: 'export'
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

This ensures the app can be statically exported and hosted under the /orbital-eye route of your GitHub Pages site.

Add a deploy script to the root package.json:

"scripts": {
  "deploy": "nx build orbital-eye --skip-nx-cache && gh-pages -d apps/orbital-eye/out"
}

git checkout --orphan gh-pages
git reset --hard
git commit --allow-empty -m "fresh and empty gh-pages branch"
git push origin gh-pages
git checkout main

1. Go to your GitHub repository.
2. Navigate to Settings > Pages.
3. Under Source, select gh-pages branch.
4. Save the changes.

Run the deploy script:

npm run deploy

This pushes the exported static files to the gh-pages branch in your GitHub repository.

• Go to https://datumgeek.github.io/orbital-eye/ to view your deployed site.
• Check that all routes and assets load correctly.

Automate this process using GitHub Actions:

1. Create a new workflow file at .github/workflows/deploy.yml.
2. Use a workflow that builds, exports, and deploys your Next.js app to GitHub Pages.

Here's a suggested section to add to your README.md:

The repository includes a GitHub Actions workflow that automates the daily download and update of satellite and conjunction data from space-track.org. This ensures the latest data is always available in the repository for use in the application.

• Daily Updates: The workflow runs every day at 13:00 UTC.
• Authentication: Uses a secure session cookie obtained via Space-Track login credentials stored in GitHub Secrets.
• Dual Branch Updates:
  • Updates the main branch with the latest data in apps/orbital-eye/public/data.
  • Updates the gh-pages branch to sync data in the data folder for GitHub Pages.

1. Authentication:

   • Logs in to Space-Track and saves a session cookie to cookies.txt.
   • The session cookie is used for subsequent data fetches.

2. Data Fetching:

   • Downloads the latest satellite data (satellite-gp.json) and conjunction data (public-conjunction.json) from Space-Track.

3. Branch Updates:

   • Updates files in the main branch for use in the application.
   • Syncs files to the data folder in the gh-pages branch for GitHub Pages.

4. Commit and Push:

   • Commits changes only if the downloaded data has been updated.
   • Pushes the changes to their respective branches.

The workflow file is located in .github/workflows/data-fetch.yml. Below is a brief outline of its structure:

name: Download JSON Daily

on:
  schedule:
    - cron: '0 13 * * *' # Runs daily at 13:00 UTC
  workflow_dispatch:

permissions:
  contents: write

jobs:
  download-json-file:
    steps:
      - Authenticate and obtain session cookie
      - Download Satellite JSON
      - Download Conjunction JSON
      - Commit and push to main branch
      - Update gh-pages branch

1. Add GitHub Secrets:

   • SPACE_TRACK_USERNAME: Your Space-Track username.
   • SPACE_TRACK_PASSWORD: Your Space-Track password.

2. Customize Paths:

   • Update file paths in the workflow if your repository structure changes.

3. Enable GitHub Pages:

   • Ensure the gh-pages branch is configured as the source for GitHub Pages.

• Automatic: The workflow runs daily based on the defined schedule.
• Manual Trigger: You can manually trigger the workflow from the GitHub Actions tab.

• Credentials: Keep the Space-Track credentials secure by using GitHub Secrets.
• Session Cookie: The cookies.txt file is not committed to the repository and is used temporarily during the workflow run.

✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨

Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Run npx nx dev orbital-eye to start the development server. Happy coding!

Run npx nx build orbital-eye to build the application. The build artifacts are stored in the output directory (e.g. dist/ or build/), ready to be deployed.

To execute tasks with Nx use the following syntax:

npx nx <target> <project> <...options>

You can also run multiple targets:

npx nx run-many -t <target1> <target2>

..or add -p to filter specific projects

npx nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.

• Set up remote caching
• Set up task distribution across multiple machines
• Learn more how to setup CI

Run npx nx graph to show the graph of the workspace. It will show tasks that you can run with Nx.

• Learn more about Exploring the Project Graph

• Join the community
• Subscribe to the Nx Youtube Channel
• Follow us on Twitter