Streamline process to deploy to Github Pages #468
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The ghp-postbuild.js file is added to the src/lib/ui/next directory. This file is necessary for the post-build process in the GitHub Pages deployment workflow.
…end repo-name to asset URLs for compatibility with GitHub Pages deployment The `ghp-postbuild.js` script is added to modify the built CSS files and prepend the repository name to the asset URLs. This is necessary to ensure compatibility with GitHub Pages deployment. The script reads the CSS files in the `.next/static/css` directory and replaces all occurrences of `url(/)` with `url(/<repoURL>/)`, where `<repoURL>` is the repository name specified in the script. This ensures that the asset URLs are correctly resolved when the app is deployed on GitHub Pages.
…ost install script
…e ghp-postbuild.js fix(project.js): fix variable assignment in ghpPostInstallScript.replace to correctly set repoURL
… file The file path for writing the ghp-postbuild.js file has been simplified to `ui/ghp-postbuild.js` instead of `ui/src/pages/ghp-postbuild.js` to improve readability and maintainability.
…nous file operations for better readability and error handling
…RLs if script is run more than once
…le and double quotes in CSS url paths
Add the hero-mina-logo.svg file to the ui library in all frameworks (Next.js, Nuxt.js, and Svelte) to be used as a hero logo in the user interface. This file contains an SVG image of the Mina logo.
…nents instead of string paths for better maintainability and performance
…ages in customNextIndex.js, customNuxtIndex.js, and customPageSvelte.js to match the actual file names and improve consistency and readability
…thub deployment in next.config.js
MartinMinkov
approved these changes
Aug 16, 2023
…ld script and fixed deployment to GitHub Pages
This was referenced Aug 17, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes
#467
Problem
Currently to deploy a NextJS UI project that was generated from the
zkApp-clito Github Pages, a user needs to manually configure their project even after running the customnpm run deploy scriptthat is included with the project template. A user needs to update thenext.config.jsand manually modify their CSS asset urls for them to work properly with GitHub Pages deployment.Solution
This PR updates the
next.config.jsfile with the necessary configuration and adds a post build script to prepend css asset URLs with the projects repo name so they are correctly deployed to GitHub Pages. The post build script is run along with other GitHub Pages deployment steps when a user entersnpm run deployin a UI project. This script is only added to a project if a user selects the option to deploy to GitHub Pages through the cli.Tested
This was tested by manually generating UI projects and deploying them to github pages with the
npm run deployscript