aws-vite-react-boilerplate

This is a boilerplate template used to bootstrap a full stack app using AWS. There is also a back-end component too. This uses Amplify

✨ Features

• 🚀 React: Harness the power of React, a popular JavaScript library for building user interfaces, to create dynamic and interactive web applications.
• ☁️ AWS: Leverage AWS services and infrastructure through AWS Amplify to build scalable and secure applications in the cloud.
• 💪 TypeScript: Written using TypeScript, enjoy improved code quality, type-safety and a better developer experience.
• ⚡️ Vite: Utilize Vite, a fast and efficient build tool, to enhance development speed and optimize the performance of your application.
• 📦 Test Using Cypress and Jest: Deliver quality with boilerplate that includes some starter tests to get you started.
• 🎨 Material UI Integration: Material UI to soup you up all the front end components cause CSS is hard.

🛠️ Setup and Usage

Follow the steps below to set up and use the aws-vite-react-boilerplate boilerplate:

1. Clone this repository to your local machine.

2. Install the dependencies using your preferred package manager (npm or Yarn).

# Using npm
npm install

# Using Yarn
yarn install

3. Configure the AWS services by setting up the AWS Amplify CLI (See the docs for a full walkthrough.) Once the AWS Amplify CLI is installed, run

amplify init

⚠️ When configuring Amplify, make sure your build folder is pointed towards dist

This will give you an amplify folder which is necessary to interact with AWS Amplify

4. Set up Amplify Auth to allow your users to log in. This boilerplate was built using just the Username option, but this can be modified if you require more options such as social media providers.

amplify add auth

6. Start the development server.

# Using npm`
npm run dev

# Using Yarn
yarn dev

5. Open your browser to your running application to see the application running.

Deploying your frontend 🚢

1. Set up Amplify Hosting. This can be done by running the command:

amplify hosting add

2. Deploy your frontend.

amplify publish

3. If your app has multiple pages (like in this boilerplate), your users will get an Access Denied as they navigate through your app.

To fix this, go to the Amplify console where your project is maintained and go to Rewrites and redirects and add the following config:

Source address: /^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> Target address: /index.html Type: 200 (Rewrite)

This should fix it!

Boilerplate Structure

├── public/              # Public assets
├── src/                 # Source code
│   ├── components/      # Reusable components
│   ├── pages/           # Application pages
│   ├── services/        # Backend services integration
│   ├── styles/          # CSS styles
│   ├── utils/           # Utility functions and helpers
│   └── App.js            # Application entry point
├── .env                 # Environment variables
└── ...

Feel free to adapt the structure based on your project's needs.

🤝 Contribution

Contributions are welcome! If you encounter any issues or have suggestions for improvements, please open an issue or submit a pull request. Together, we can make this project even better.

📝 License

This project is licensed under the MIT License.

Happy coding! If you have any questions or need assistance, feel free to reach out to our friendly community. Enjoy building awesome applications with this template! 😄🚀