Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/whatishedoing/cloud-web-app
Shows how an entire web app could be composed, configured and deployed to a cloud provider.
https://github.com/whatishedoing/cloud-web-app
apollo graphql nodejs typescript yarn
Last synced: 2 days ago
JSON representation
Shows how an entire web app could be composed, configured and deployed to a cloud provider.
- Host: GitHub
- URL: https://github.com/whatishedoing/cloud-web-app
- Owner: WhatIsHeDoing
- License: mit
- Created: 2019-11-28T22:31:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-12-12T21:37:03.000Z (about 5 years ago)
- Last Synced: 2024-12-16T21:40:36.776Z (about 2 months ago)
- Topics: apollo, graphql, nodejs, typescript, yarn
- Language: TypeScript
- Homepage:
- Size: 422 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cloud Web App
## 👋 Introduction
This mono-repo is used to demonstrate how an entire web app could be composed, configured and deployed to a cloud provider.
It can currently be deployed to [AWS] using the [Terraform] configuration provided.
Both the [React] web app and [GraphQL] API use [TypeScript], [Yarn] and a host of smaller dependencies to keep the
developer experience consistent. Open this repo in [Visual Studio Code] to use its recommended extensions and settings.
## 🤖 Setup
### 🌍 Global
First, use [Git] to clone this repository.
If you are running Windows, inspect `.\windows-setup.ps1`, then install [Chocolatey] and run that script to install any
missing dependencies. Similar commands like `apt-get` are available for Linux distros.
### 📌 Local
Run the GraphQL API in one terminal with:
```bash
cd api
yarn install
yarn start
```
Now run the web app in another terminal using:
```bash
cd app
yarn install
yarn start
```
## 🕴 Real-World
Were this a real-world application, I would add/change:
- Split the API and web app into separate repositories, and use a package manager such as [Gemfury] to share private code,
such as the GraphQL schema and models, via npm packages.
- Add [🐶 Husky][Husky] to each separate repo to run a build, lint and unit tests before pushing to its remote.
## ⏳ History
- The GraphQL API was set up using the _Get started with Apollo Server_ [guide][apollo-guide].
- The web app was generated by the _create-react-app_ TypeScript [template][create-react-app].
- The Git commit message format is based on [gitm😜ji][gitmoji].
[apollo-guide]: https://www.apollographql.com/docs/apollo-server/getting-started/
[AWS]: https://aws.amazon.com/ "Amazon Web Services (AWS) - Cloud Computing Services"
[Chocolatey]: https://chocolatey.org/ "The package manager for Windows"
[create-react-app]: https://create-react-app.dev/docs/adding-typescript/
[Gemfury]: https://gemfury.com/ "Private RubyGems, npm, PyPI, NuGet, Composer & more"
[gitmoji]: https://gitmoji.carloscuesta.me/ "An emoji guide for your commit messages"
[git]: https://git-scm.com/ "A free and open source distributed version control system"
[GraphQL]: https://graphql.org/ "A query language for your API"
[Husky]: https://github.com/typicode/husky "🐶 Git hooks made easy"
[React]: https://reactjs.org/ "A JavaScript library for building user interfaces"
[Terraform]: https://www.terraform.io/ "Use IaC to provision and manage any cloud, infrastructure, or service"
[TypeScript]: https://www.typescriptlang.org/ "JavaScript that scales"
[Visual Studio Code]: https://code.visualstudio.com/ "Code editing. Redefined."
[Yarn]: https://yarnpkg.com/lang/en/ "Fast, reliable, and secure dependency management"