Improve community site local dev workflow (fixes watch & hot-reloading)#1674
Improve community site local dev workflow (fixes watch & hot-reloading)#1674bcullman wants to merge 4 commits intoOctopusDeploy:masterfrom
Conversation
bcullman
changed the title
bcullman
changed the title
bcullman
changed the title
| browserSync.init(null, { | ||
| proxy: "http://localhost:9000", | ||
| }); | ||
| browserSync.init( |
There was a problem hiding this comment.
This changes watch to open the primary app URL on :9000 instead of the BrowserSync proxy, and waits until the server is reachable before opening the browser.
| .pipe(argv.production ? gulp.dest(`${publishDir}/app/services`) : gulp.dest(`${buildDir}/app/services`)); | ||
| }) | ||
| ); | ||
| gulp.task("step-templates:data", () => { |
There was a problem hiding this comment.
Template edits now use the narrower step-templates:data path during watch, so local template changes refresh without rerunning the heavier full step-templates flow.
| return this.hydrateTemplates(this.readTemplatesFromDisk()); | ||
| } | ||
|
|
||
| getTemplates() { |
There was a problem hiding this comment.
In development, the library data is read fresh from disk so regenerated step-templates.json is served without restarting; non-development still uses cached in-memory data.
|
|
||
| let app = express(); | ||
| const isDevelopment = process.env.NODE_ENV === "development"; | ||
| const staticAssetOptions = isDevelopment |
There was a problem hiding this comment.
These dev-only no-cache headers avoid stale local assets during hot-reload, which previously made React changes appear only after a hard refresh.
|
|
||
| LibraryActions.sendTemplates(data, () => { | ||
| var libraryAppHtml = ReactDOMServer.renderToStaticMarkup(<RouterContext {...renderProps} />); | ||
| const browserSyncClientUrl = process.env.NODE_ENV === "development" ? `${req.protocol}://${req.hostname}:3000/browser-sync/browser-sync-client.js` : null; |
There was a problem hiding this comment.
watch now opens the app directly on :9000, so this passes through the BrowserSync client URL to keep browser reloads working while using the app URL instead of the proxy URL.
|
|
||
| ga('create', 'UA-24461753-5', 'octopusdeploy.com'); | ||
|
|
||
| if browserSyncClientUrl |
There was a problem hiding this comment.
Inject the BrowserSync client into the app page during local development so reloads still work while browsing :9000 directly.
1 participant
Background
This PR improves the local development workflow for the Octopus Community Library (library.octopus.com) site.
The current local dev loop has several issues:
npm run watchopens the BrowserSync proxy URL instead of the primary app URL on port9000Results
The local watch and hot-reload loop is now more reliable and closer to what a developer expects during day-to-day work.
Before
After
http://localhost:9000step-templates:datapathPre-requisites
Idshould be a GUID that is not00000000-0000-0000-0000-000000000000Idproperty (updating theIdwill break the Library sync functionality in Octopus).Versionshould be incremented, otherwise the integration with Octopus won't update the step template correctly$LastModifiedByfield must be present, and (optionally) updated with the correct authorCategoryhas been created:{categoryname}.pngmust be present under thestep-templates/logosfolderswitchin thehumanizefunction ingulpfile.babel.jsmust have acasestatement corresponding to itFixes #1673