Day 36: CodeHost
Today, I implemented the feature in CodeHost, which allows the user to roll back to the last successful deployment.
I started with updating the UI for other tasks and added a div with a button to revert to the previous successful deployment task. The div is rendered under the task details if it's the 2nd last successful deployment. The user can click on the Instant rollback button and this will update the database the productionTaskId with that taskId, on the next request, the request-handler service will resolve with the files from the given taskId of the project, thus reverting to the last successful deployment version of the project.
Get Alwin Sunil’s stories in your inbox
Join Medium for free to get updates from this writer.
Also, if in currently in previous successful deployment, the option to revert to the latest deployment is given under the task just in the same way, using a Instant rollback button. The time was mostly taken to update the project page UI to accommodate the buttons and figure out edge cases for the UI on where to show the Instant rollback button.
The logic is simple, for all the projects the latest 2 successful build files are saved in object storage, and for each project, productionTaskId we change this field in the database and clear the cache for that project’s subdomain to R2 location mapping. The logic of request-handler has been built in a way no changes are required, it will find the latest productionTaskId from the database for the project and will serve the files from that deployment when the user goes to the deployed project URL.
The most amount of time was spent making the UI dynamic. Initially, project data, including the productionTaskId, was sent from the first layout load on the server. Since this was server-rendered, we couldn't use useEffect to re-fetch the data. To address this, I moved the logic for fetching the project data to the ProjectContext. Now, the data is fetched there, and the components that require this data are already client components which made it easier to make the page reactive to state. On project rollback, we're calling the refetchProject function from the ProjectContext, which fetches and updates the context data, causing the page to re-render accordingly.
That’s all for today, Thanks for reading.
