├── public └── wakemydyno.txt ├── Procfile ├── .gitignore ├── assets ├── logo.png ├── demonstration.png ├── folder-structure.png └── logo.svg ├── .env.example ├── test └── index.test.js ├── package.json ├── index.js └── README.md /public/wakemydyno.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: npm start 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | *.pem 4 | .env 5 | package-lock.json 6 | -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itaditya/react-preview/HEAD/assets/logo.png -------------------------------------------------------------------------------- /assets/demonstration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itaditya/react-preview/HEAD/assets/demonstration.png -------------------------------------------------------------------------------- /assets/folder-structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itaditya/react-preview/HEAD/assets/folder-structure.png -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | # The ID of your GitHub App 2 | APP_ID= 3 | WEBHOOK_SECRET=development 4 | 5 | # Go to https://smee.io/new set this to the URL that you are redirected to. 6 | # WEBHOOK_PROXY_URL= 7 | 8 | # Use `trace` to get verbose logging or `info` to show less 9 | LOG_LEVEL=debug 10 | 11 | -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | // You can import your modules 2 | // const index = require('../index') 3 | 4 | test('that we can run tests', () => { 5 | // your real tests go here 6 | expect(1 + 2 + 3).toBe(6) 7 | }) 8 | 9 | // For more information about testing with Jest see: 10 | // https://facebook.github.io/jest/ 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-preview", 3 | "version": "1.0.0", 4 | "description": "GitHub App built with probot that generates preview links for react based projects.", 5 | "author": "Aditya Agarwal (adi.surge.sh)", 6 | "license": "ISC", 7 | "repository": "https://github.com/itaditya/react-preview.git", 8 | "scripts": { 9 | "dev": "nodemon --exec \"npm start\"", 10 | "start": "probot run ./index.js", 11 | "lint": "standard --fix", 12 | "test": "jest && standard", 13 | "deploy": "git push heroku master" 14 | }, 15 | "dependencies": { 16 | "probot": "^6.0.0", 17 | "probot-commands": "^1.0.1" 18 | }, 19 | "devDependencies": { 20 | "jest": "^21.2.1", 21 | "nodemon": "^1.17.2", 22 | "smee-client": "^1.0.1", 23 | "standard": "^10.0.3" 24 | }, 25 | "engines": { 26 | "node": ">= 8.3.0" 27 | }, 28 | "standard": { 29 | "env": [ 30 | "jest" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const commands = require('probot-commands') 3 | 4 | const getCodeSandboxLink = ({owner, repo, branch, folder = ''}) => { 5 | const link = `https://codesandbox.io/s/github/${owner}/${repo}/tree/${branch}/${folder}` 6 | return link 7 | } 8 | 9 | module.exports = (robot) => { 10 | const app = robot.route('/') 11 | app.use(require('express').static('public')) 12 | 13 | commands(robot, 'preview', async (context, command) => { 14 | const { payload } = context 15 | if (payload.comment.user.type === 'Bot') { 16 | return 17 | } 18 | 19 | const config = await context.config('config.yml', { 20 | reactPreviewFolder: '' 21 | }) 22 | 23 | const repo = payload.repository.name 24 | const owner = payload.repository.owner.login 25 | const prNum = payload.issue.number 26 | 27 | const { data: pullRequestResult } = await context.github.pullRequests.get({owner, repo, number: prNum}) 28 | 29 | const prBranchName = pullRequestResult.head.ref 30 | const prRepoName = pullRequestResult.head.repo.name 31 | const prOwnerName = pullRequestResult.head.repo.owner.login 32 | 33 | const link = getCodeSandboxLink({ 34 | owner: prOwnerName, 35 | repo: prRepoName, 36 | branch: prBranchName, 37 | folder: config.reactPreviewFolder 38 | }) 39 | 40 | context.github.issues.createComment(context.issue({ 41 | body: `preview it [here](${link})` 42 | })) 43 | }) 44 | } 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-preview 2 | 3 | > a GitHub App built with [probot](https://github.com/probot/probot) that generates preview links for react based projects. 4 | 5 | ![Demo](assets/demonstration.png?raw=true) 6 | 7 | ## How to Use 8 | 9 | * Go to the [app](https://github.com/apps/react-preview) page. 10 | * Install the github app on your repo. 11 | * If the react code is in the repo root directory then config ends here. 12 | * Now on any PR, comment `/preview` and the github bot app will reply with a preview link. 13 | 14 | * In case, your react code is not in the repo root. Say you have backend code in the repo root and inside that you have a folder named `client/`. The client folder contains the react code (along with it's package.json), then you have to tell the github app about this. Make sure the package.json containing the react dependency is directly in that folder. To do this, follow these steps - 15 | 16 | 1. Create a folder named `.github/` in repo root. 17 | 1. Inside `.github/` folder create a `config.yml` file. 18 | 1. Put this code in the `config.yml`. Replace client with whatever your folder name is. You can also go deeper like `/package/web`. 19 | ```yml 20 | reactPreviewFolder: client 21 | ``` 22 | 23 | If you followed the example the folder structure should look like 24 | 25 | ![Folder Structure of Repo with react-preview installed](assets/folder-structure.png?raw=true) 26 | 27 | ## Setup for Development 28 | 29 | ```sh 30 | # Install dependencies 31 | npm install 32 | 33 | # Run the bot 34 | npm start 35 | ``` 36 | 37 | See [docs/deploy.md](docs/deploy.md) if you would like to run your own instance of this app. 38 | -------------------------------------------------------------------------------- /assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | --------------------------------------------------------------------------------