React on Rails Tutorial: Setting Up a Veet App

Introduction

• Setting up a Veet app integrated with a Rails API.
• Importance of versioning the Rails API for future modifications.
• Initial steps involve using GitHub issues to organize tasks.

Steps to Set Up

1. Creating a GitHub Issue

• Navigate to GitHub repository.
• Create a new issue titled something like "Setup Veet React App".
• Include a checklist:
  • Create a Veet app.
  • Refactor API routes to use /api/v1.

2. Creating a New Branch

• Develop features in a new branch.
• Create a branch from the issue page for better workflow tracking.

3. Refactoring Rails API Routes

• Change Rails API routes to be versioned with /api/v1:
  • Add namespace API and v1 in routes.
  • Move PostsController into controllers/api/v1/ directory.

4. Setting Up the Veet App

• Use npm create veet@latest to create a project.
• Name the frontend directory (e.g., client).
• Choose React and JavaScript for the project.

5. Configuring Environment Variables

• Install dotenv for managing environment variables.
• Create .env.development file in the client root:
  • Define VITE_API_URL for accessing the API.

6. Ignoring Environment Variables in Git

• Add .env.development to .gitignore to prevent uploading sensitive data.

7. Running the Development Servers

• Start Rails server using rails s.
• Start Veet server using npm run dev.

8. Structuring React Application

• Organize React components, possibly using a features-style directory structure.
• Create a PostsList component to display posts.

9. Fetching Posts from API

• Use useEffect to fetch posts from the Rails API on component load.
• Store posts in state using useState.
• Map through posts to render them in the component.

10. Managing API URL

• Create a constants.js file to manage environment-aware API URL.

Testing and Committing Changes

• After setting up and testing, commit changes with meaningful messages.
• Example commit message: "Added the Veet React Client app."

Creating a Pull Request

• Push changes to GitHub.
• Create a pull request referencing the issue created initially.
• Merge the pull request once reviewed.

Key Considerations

• Abstracting API calls to avoid redundancy as the app scales.
• Planning for better error handling and loading states in React.

Conclusion

• Successfully set up a Veet app with Rails API integration.
• Next steps include adding functionality and considering refactoring strategies.