Merge branch 'master' of github.com:Telegram-Mini-Apps/react-template

.github/workflows/github-pages-deploy.yml

@@ -0,0 +1,61 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['master']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: true
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload dist repository
+          path: './dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

README.md

@@ -50,31 +50,67 @@ project information.
 
 ## Deploying Application
 
-This boilerplate uses GitHub Pages as the way to host the application externally. Before deploying
-your application, ensure that you have done the following:
+This boilerplate uses GitHub Pages as the way to host the application externally. GitHub Pages provides a CDN
+which will let your users receive the application rapidly. Alternatively, you could use such services
+as [Heroku](https://www.heroku.com/) or [Vercel](https://vercel.com).
+
+### GitHub Workflow
+
+To simplify the process of deployment, this boilerplate contains already
+written [GitHub workflow](.github/workflows/github-pages-deploy.yml) to deploy the project automatically in case, some
+content was pushed to the `master` branch.
+
+To let this workflow work properly, it is required create a new environment (or edit the existing one) in the GitHub
+repository Settings with the name `github-pages`. Then, add the `master` branch to the list of deployment branches.
+
+Environments settings could be find using this URL: `https://github.com/{username}/{repository}/settings/environments`
+
+![img.png](.github/deployment-branches.png)
+
+In case, you don't want to do it automatically, or you don't use GitHub as the project codebase, just remove the
+`.github` directory.
+
+### GitHub Web Interface
+
+Alternatively, developers are able to configure the automatic deployment using GitHub web interface. To use it,
+follow the link: `https://github.com/{username}/{repository}/settings/pages`.
+
+### Manual Deployment
+
+This boilerplate uses the [gh-pages](https://www.npmjs.com/package/gh-pages) tool, which allows deploying your 
+application right from your PC. 
+
+#### Configuring
+
+Before running the deployment process, ensure that you have done the following:
 
 1. Replaced the `homepage` value in `package.json`. The GitHub Pages deploy tool uses this value to
-   determine the related project.
+   determine the related GitHub project.
 2. Replaced the `base` value in `vite.config.ts` and have set it to the name of your GitHub
    repository. Vite will use this value when creating paths to static assets.
 
 For instance, if your GitHub username is `telegram-mini-apps` and the repository name
 is `is-awesome`, the value in the `homepage` field should be the following:
 
-```
-https://telegram-mini-apps.github.io/is-awesome
+```json
+{
+    "homepage": "https://telegram-mini-apps.github.io/is-awesome"
+}
 ```
 
 And `vite.config.ts` should have this content:
 
 ```ts
 export default defineConfig({
-  base: '/is-awesome/',
-  // ...
+    base: '/is-awesome/',
+    // ...
 });
 ```
 
-### Running
+You can find more information on configuring the deployment in the `gh-pages`
+[docs](https://github.com/tschaub/gh-pages?tab=readme-ov-file#github-pages-project-sites).
+
+#### Before Deploying
 
 Before deploying the application, make sure that you've built it and going to deploy the fresh
 static files:
@@ -91,7 +127,4 @@ pnpm run deploy
 
 After the deployment completed successfully, visit the page with data according to your
 username and repository name. Here is the page link example using the data mentioned above:
-
-```
-https://telegram-mini-apps.github.io/is-awesome
-```
+https://telegram-mini-apps.github.io/is-awesome