diff --git a/.github/deployment-branches.png b/.github/deployment-branches.png new file mode 100644 index 0000000..a3797c1 Binary files /dev/null and b/.github/deployment-branches.png differ diff --git a/.github/workflows/github-pages-deploy.yml b/.github/workflows/github-pages-deploy.yml new file mode 100644 index 0000000..84efcc9 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/README.md b/README.md index 408ec1a..0ee9cb3 100644 --- a/README.md +++ b/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 -``` \ No newline at end of file +https://telegram-mini-apps.github.io/is-awesome \ No newline at end of file