Workflow End to End

Workflow: End-to-End – From Sign-Up to Pull Request

The whole Crodox journey in one go.

---

Overview

Here's what you'll do:

1. Sign Up & Authenticate - Create your account
2. Set Up GitHub - Connect your repositories
3. Create Your First Template - Build or import a grammar
4. Run Your First Workbench - Analyze code and extract components
5. Generate a Pull Request - Push changes back to your repository

Time estimate: 20–30 minutes
Start here: https://crodox-app.com/home

---

Phase 1: Sign-Up and Authentication

Step 1 – Access the Crodox App

1. Open https://crodox-app.com/home in your web browser
2. You arrive at the login page

Step 2 – Create Your Account

1. Enter your email address
2. Accept the Terms of Service and Privacy Policy
3. Click Send verification code

Step 3 – Verify Your Email

1. Check your email for a 6-digit verification code from Crodox
2. Return to the Crodox app
3. Enter the code in the verification field
4. Click Verify code

Step 4 – Authorize GitHub

1. You are redirected to GitHub Enterprise to authorize the Crodox app
2. Review the requested permissions (repository access, etc.)
3. Click Authorize to grant Crodox access

Step 5 – Complete Your Profile

1. Return to the Crodox app
2. Enter a username (your display name in Crodox)
3. Click Save

You are now logged into Crodox. Welcome!

---

Phase 2: Initial Setup

Step 6 – Verify Your GitHub Connection

1. Click Settings (gear icon) in the left sidebar
2. Scroll to GitHub Integration
3. Verify that it shows "GitHub account linked" with your username
4. If not linked, click Re-link GitHub and repeat Step 4

Step 7 – Authorize GitHub Access (if needed)

1. If prompted, click Manage Repository Access
2. Ensure that your repositories are listed as accessible
3. Return to the main Crodox interface

You now have full access to your GitHub repositories.

---

Phase 3: Create Your First Template

Option A: Quick Start with angularTemp

1. Click the Template Editor icon (<>) in the left sidebar
2. Click the Templates tab
3. Enter a template name (e.g., MyAngularTemplate_v1)
4. Click + to create
5. Click the Template menu and select Import Template from Repository
6. Select angularTemp (github) and click Import
7. Click Save to store your template

You now have a working template imported from angularTemp.

Option B: Start from Scratch

1. Click the Template Editor icon
2. Click the Templates tab
3. Enter a template name
4. Click +
5. In the Grammar Editor, write your grammar (see Creating-First-Template for examples)
6. Click Save

---

Phase 4: Test Your Template

Step 8 – Select a Test Repository

1. In the Project Explorer (center-left), open the Repository dropdown
2. If you imported angularTemp, select it; otherwise, choose any repository
3. The project tree loads

Step 9 – Load a Test File

1. Expand folders in the project explorer (e.g., src → app)
2. Click on a code file to load it
3. Your grammar runs automatically

Step 10 – Review Extraction

In the Trial Extraction Field, you should see extracted components. If nothing appears:

1. Check your grammar syntax (see Syntax-Overview)
2. Verify the file type matches your <~ file.xy ~> pattern
3. Try a different file
4. Refine your grammar and re-save

When extraction looks good, proceed to Step 11.

---

Phase 5: Create and Run Your First Workbench

Step 11 – Open the Create Workbench Screen

1. Click the Workbench icon (circular arrow) in the left sidebar
2. Click Create Workbench button

Step 12 – Configure Your Workbench

1. Workbench Name – Enter a descriptive name (e.g., MyFirstAnalysis)
2. Select Template – Choose your template from Step 3
3. Select Repository – Choose the repository to analyze
   • For learning: use simpleDemo or angularTemp
   • For real work: select your own repository
4. Select Files – Expand the folder tree and check the files you want to analyze
5. Review Patch Preview – Scroll down to see what patches will be generated

Step 13 – Create the Workbench

1. Click Create Workbench in the bottom-right corner
2. Crodox begins analyzing (you see a loading state)
3. Results appear within moments

---

Phase 6: Review Results and Generate a Pull Request

Step 14 – Explore Workbench Results

1. Extracted Components – View all identified objects
2. Patch Preview – See the code changes that will be generated
3. Locations – Review source and target file paths
4. Codespace – Optionally, click Create Codespace for interactive editing

Step 15 – Generate a Pull Request

1. Review the Patch Preview to ensure changes look correct
2. Click Generate Pull Request (or Merge into Origin depending on your setup)
3. Crodox creates a pull request in your GitHub repository
4. You receive a notification with a link to the PR

Step 16 – Review Your PR on GitHub

1. Follow the link to GitHub or visit your repository
2. Open the pull request that Crodox created
3. Review the diff and code changes
4. Merge the PR or request feedback from your team

---

That's it

You've now been through the whole cycle: signed up, connected your repos, built a template, ran a workbench, and pushed a PR. You know how the tool works.

---

Going Deeper

From here you can:

• Modify the grammar to catch more patterns in your own code
• Create workbenches for different projects or codebases
• Use the Codespace feature to edit results directly in VS Code
• Define custom transformation rules with the Patch Maker
• Export templates and share them with your team

For more detail on specific features, check Workflow-SimpleDemo, Workflow-AngularTemplate, Template-Editor, or Syntax-Overview.

---

Quick Reference

Step	Action	Where
1	Open app	https://crodox-app.com/home
2	Create account	Login page
3	Verify email	Email inbox
4	Authorize GitHub	GitHub Enterprise
5	Set username	Settings page
6–7	Verify GitHub link	Settings page
8–10	Test template	Template Editor
11–13	Create workbench	Workbench section
14–16	Generate PR	Workbench detail view

---

Troubleshooting

Problem	Solution
Can't sign in	Check your email for verification code; request a new one if needed
GitHub not linked	Go to Settings and click Re-link GitHub
Repository not visible	Ensure GitHub access is authorized; refresh the page
Template won't save	Check grammar syntax in the error message
No components extracted	Verify file types match your grammar patterns
Workbench creation fails	Ensure you have selected a template and repository

---

Support

• For issues: Check the relevant workflow page or documentation
• For questions: Refer to the App-* pages for feature documentation
• For examples: See the Example-* pages for grammar patterns

---

Start your journey now: https://crodox-app.com/home

Demo repositories: simpleDemo | angularTemp