How To View Your App with ChatGPT Codex

Key Concepts

• Codeex: An AI tool used for code generation and modification.
• GitHub: A platform for version control and collaboration.
• Branching: Creating separate lines of development in a repository.
• Pull Request (PR): A request to merge changes from one branch into another.
• Merging: Integrating changes from one branch into another.
• Mobile Responsiveness: Designing a website to adapt to different screen sizes.
• npm start: A command to start a Node.js application.
• get branch: Command to list or show the current branch.
• get checkout -b <branch_name>: Command to create and switch to a new branch.
• get add .: Command to stage all changes.
• get commit -m "<message>": Command to commit staged changes with a message.
• get push origin <branch_name>: Command to push a local branch to a remote repository.
• get pull origin <branch_name>: Command to pull changes from a remote branch to the local repository.
• get checkout <branch_name>: Command to switch to an existing branch.
• get branch -D <branch_name>: Command to forcefully delete a branch locally.

Using Codeex in a Developer Workflow

Setting Up the Environment

1. Connect GitHub Account: The first step is to connect your GitHub account to Codeex. A separate video (linked in the description) explains this process in detail.

2. Add Repository: Once connected, add the relevant repository to Codeex. This involves navigating to the "Environments" section and creating a new environment, selecting the desired repository (e.g., "web-cafe-land"), and providing a description.

3. Create a New Branch: To avoid breaking the main codebase, create a separate branch for making changes. This is standard practice in software development.

   • Open the project in a code editor (VS Code, Cursor AI, Windsurf, etc.).
   • Open the terminal within the code editor.
   • Run git branch to confirm the current branch (usually "main").
   • Create a new branch using git checkout -b <branch_name> (e.g., git checkout -b mobile-words).

4. Push the Branch to GitHub: To make the new branch visible in Codeex, push it to the remote repository on GitHub.

   • Make a small change to a file (e.g., add "test1235" to app.js).
   • Stage the changes using git add ..
   • Commit the changes with a message using git commit -m "test".
   • Push the branch to GitHub using git push origin <branch_name> (e.g., git push origin mobile-words).

5. Create a Pull Request (Optional): While not immediately necessary, creating a pull request on GitHub allows for tracking changes and merging them later.

   • After pushing the branch, a prompt to create a pull request will appear on GitHub.
   • Create the pull request with a descriptive title (e.g., "New words in mobile").

6. Select the Branch in Codeex: Reload Codeex and select the newly created branch (e.g., "Mobile words") from the branch selection dropdown.

Making Changes with Codeex

1. Identify Tasks: Clearly define the tasks to be performed. In the example, the tasks are:

   • Change the school name from "school" to "builder console log" in the investmentG component.
   • Remove the "content catalog" button in the mobile view of the website.

2. Provide Specific Prompts: Formulate precise prompts for Codeex, specifying the desired changes.

   • For the school name change: "For investmentG can we have this so school now says builder console log".
   • For mobile responsiveness: "When I make the website go into mobile view I don't want the button content catalog to show".

3. Generate Code: Use Codeex to generate the code for each task.

4. Review and Create Pull Requests: After Codeex generates the code, review the changes and create pull requests for each task.

5. Merge Pull Requests: Merge the pull requests to integrate the changes into the branch.

Testing Changes Locally

1. Pull Changes from the Branch: To see the changes locally, pull the code from the branch using get pull origin <branch_name> (e.g., get pull origin mobile-words).
2. Run the Application: Start the application using npm start to view the changes in a browser.
3. Inspect and Verify: Use the browser's developer tools (inspect) to verify that the changes are implemented correctly, especially for mobile responsiveness.

Merging Changes to Main and Cleanup

1. Merge to Main: Once satisfied with the changes in the branch, merge the branch back into the main branch. This can be done through the GitHub interface.
2. Update Local Main Branch: After merging, switch back to the main branch locally using get checkout main and pull the latest changes using get pull origin main.
3. Delete the Branch (Optional): To keep the repository clean, delete the branch locally using get branch -D <branch_name> (e.g., get branch -D mobile-words).

Additional Resources

• Builder Wisconsin Log: A community run by the video creator for answering questions and sharing insights.
• Bumpups: A platform for asking questions about YouTube videos by pasting the video link.

Conclusion

The video demonstrates a practical workflow for using Codeex to modify a live website. By creating separate branches, generating code with Codeex, and using pull requests, developers can safely experiment with changes and integrate them into their codebase. The process involves clear communication with Codeex through specific prompts, thorough testing, and proper version control practices. The speaker also encourages viewers to engage with the provided resources for further assistance and learning.