Question 373687 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Heroku NextJs trigger build when data is updated

We currently operate two applications on Heroku: a backend built with KeystoneJS 6 and a frontend using Next.js 14. Both apps are connected to Heroku through the GitHub Deployment Method, each residing in its private repository. As I focus on backend development, I aim to initiate a rebuild of the Next.js frontend whenever specific data operations occur, such as creation, update, or deletion.

I’ve successfully configured the necessary hooks for these operations on the backend. However, I’m encountering difficulties triggering a new build on the frontend application. To address this, I’ve generated a GitHub Access Token to authenticate requests.

Initially, I attempted to trigger a new build using the Heroku API with the following code

await heroku.post(`/apps/${process.env.HEROKU_APP_ID}/builds`, {
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/vnd.heroku+json; version=3',
    Authorization: `token ${process.env.GITHUB_PERSONAL_ACCESS_TOKEN}`,
  },
  body: {
    source_blob: {
      url: `https://api.github.com/repos/${repoOwner}/${repoName}/tarball/${branchName}`,
    },
  },
});

However, this approach returned an error response: body: { id: 'unauthorized', message: 'Invalid credentials provided.' }

Additionally, the Heroku Dashboard displayed the message: "Unable to fetch source from GitHub. Please ensure your GitHub connection is valid and that any GitHub security settings are configured to allow Heroku access."

Interestingly, I discovered that the same GitHub Access Token successfully authenticated requests when directly downloading the tarball:

const tarballDownload = await fetch(
 `https://api.github.com/repos/${repoOwner}/${repoName}/tarball/${branchName}`,
 {
   headers: {
     Authorization: `token ${githubToken}`,
   },
 }
);

I’m currently seeking guidance on the correct approach to trigger a new build on the frontend application. Any insights or suggestions would be greatly appreciated.

Tags:

2

Answers


  1. 0

    If I’m following your code correctly, it looks like you’re incorrectly passing your GitHub auth token (process.env.GITHUB_PERSONAL_ACCESS_TOKEN) to the Heroku API.

    Since this request is made from your app to the Heroku API you should instead be passing a Heroku OAuth token in the format Bearer {token}. That should authenticate this first request, from your app to Heroku.

    See the Heroku API getting started guide and the OAuth Authorization section of the Heroku API reference for details.

    But you do still need the Github auth token of course, or rather, Heroku needs to use it when making it’s call to retrieve the tarball from Github. According to this doc the Github token should be included in the source_blob URL like this:

    https://user:[email protected]/repos/<username>/<repo name>/tarball/master/

    That then authenticates the request Heroku’s backend makes to Github, which should your second problem.

    Login or Signup to reply.
  2. 0

    Thank you, @Molomby! I tried your solution, but it resulted in an "Unable to display build output" error. However, your guidance led me to discover a solution at https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28#download-a-repository-archive-tar.

    The approach that worked for me involved obtaining a download URL from the GitHub API first:

    const octokit = new Octokit({ auth: 'YOUR-TOKEN' });

const response = await octokit.request('GET /repos/{owner}/{repo}/tarball/{ref}', {
  owner: 'OWNER',
  repo: 'REPO',
  ref: 'REF',
  headers: {
    'X-GitHub-Api-Version': '2022-11-28'
  }
});

    This request returns a download URL that remains valid for 5 minutes. Subsequently, I could use this URL with heroku.post() to trigger the build process successfully.

    Thanks again for your assistance!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search