diff --git a/docs/scully-configuration.md b/docs/scully-configuration.md index ef0cbe85e..a8a37f35d 100644 --- a/docs/scully-configuration.md +++ b/docs/scully-configuration.md @@ -20,9 +20,11 @@ The `scully..config.ts` file's structure is shown below: - [projectRoot](#projectroot) - [homeFolder](#homefolder) - [outDir](#outdir) + - [outHostFolder](#outHostFolder) - [logFileSeverity](#logfileseverity) - [handle404](#handle404) - [distFolder](#distfolder) + - [hostFolder](#hostFolder) - [routes](#routes) - [Unhandled Routes](#unhandled-routes) - [Handled Routes](#handled-routes) @@ -49,13 +51,17 @@ export interface ScullyConfig { /** the folder where the project sources resides, read from angular.json */ sourceRoot?: string; /** Array with string ID's of the content-renderers that will be run on all routes */ - defaultPostRenderers?: string[]; + defaultPostRenderers?: (string | symbol)[]; /** the root of the project (where angular.json lives) */ homeFolder?: string; /** the destination of the Scully generated files */ outDir?: string; + /** the folder used by the scully server to serve the generated files. defaults to outDir */ + outHostFolder?: string; /** the place where distribution files of the project are. Should be a subfolder of dist. */ distFolder?: string; + /** the folder used to serve the angular distribution files, defaults to distFolder */ + hostFolder?: string; /** transferState only inlined into page, and not written into separate data.json */ inlineStateOnly?: boolean; /** Set what is what is written to the logfile, defaults to warnings and errors */ @@ -107,6 +113,10 @@ The `ScullyConfig` interface provides parameters for configuring how Scully work `outDir` - The folder's path where Scully leaves the statics files. This should not be the same as the distFolder. +### outHostFolder + +`outHostFolder` The folder that is used to host the static files, defaults to the outDir. You can use this when you need to change the baseHref of pages. + The default path is: ```URL @@ -136,6 +146,10 @@ options: `distFolder` - Path to the Angular application's dist folder. Scully takes the `angular.json` file's default path. This option can be modify according to the needs. This folder will be used by Scully during rendering. +### hostFolder + +`hostFolder` The folder that is used to host the Angular distribution files, defaults to the distFolder. You can use this when changed the base-href with the Angular-CLI. Make sure the folders are matching the base-href settings, otherwise Scully will not be able to render your site. + ### routes Scully has the two following types of routes: diff --git a/libs/scully/src/lib/utils/interfacesandenums.ts b/libs/scully/src/lib/utils/interfacesandenums.ts index dc5a96d85..88fbab537 100644 --- a/libs/scully/src/lib/utils/interfacesandenums.ts +++ b/libs/scully/src/lib/utils/interfacesandenums.ts @@ -22,8 +22,12 @@ export interface ScullyConfig { homeFolder?: string; /** the destination of the Scully generated files */ outDir?: string; + /** the folder used by the scully server to serve the generated files. defaults to outDir */ + outHostFolder?: string; /** the place where distribution files of the project are. Should be a subfolder of dist. */ distFolder?: string; + /** the folder used to serve the angular distribution files, defaults to distFolder */ + hostFolder?: string; /** transferState only inlined into page, and not written into separate data.json */ inlineStateOnly?: boolean; /** Set what is what is written to the logfile, defaults to warnings and errors */ diff --git a/libs/scully/src/lib/utils/serverstuff/handleUnknownRoute.ts b/libs/scully/src/lib/utils/serverstuff/handleUnknownRoute.ts index e74fab850..d1a370b53 100644 --- a/libs/scully/src/lib/utils/serverstuff/handleUnknownRoute.ts +++ b/libs/scully/src/lib/utils/serverstuff/handleUnknownRoute.ts @@ -16,13 +16,15 @@ export const handleUnknownRoute: RequestHandler = async (req, res, next) => { if (req.accepts('html')) { /** only handle 404 on html requests specially */ await loadConfig; - const distIndex = join(scullyConfig.homeFolder, scullyConfig.distFolder, '/index.html'); - const dist404 = join(scullyConfig.homeFolder, scullyConfig.distFolder, '/404.html'); + const distFolder = join(scullyConfig.homeFolder, scullyConfig.hostFolder || scullyConfig.distFolder); + const distIndex = join(distFolder, '/index.html'); + const dist404 = join(distFolder, '/404.html'); // cmd-line takes precedence over config const h404 = (handle404.trim() === '' ? scullyConfig.handle404 : handle404).trim().toLowerCase(); switch (h404) { case '': + /** checks if the path is in the scully.routes */ const myHandledRoutes = loadHandledRoutes(); if (myHandledRoutes.includes(req.url)) { return res.sendFile(distIndex); @@ -30,6 +32,7 @@ export const handleUnknownRoute: RequestHandler = async (req, res, next) => { break; case 'onlybase': case 'baseonly': + /** checks if the path has a unhandled route that fits */ const unhandledRoutes = await findPlugin(handleTravesal)(); if (unhandledRoutes.find(matchRoute(req))) { /** this is a base route known by Scully, just return the index */ @@ -38,8 +41,10 @@ export const handleUnknownRoute: RequestHandler = async (req, res, next) => { /** use fallthrough as all of those are served by the above route-machers, and only here if the route is 404 */ break; case 'index': + /** don't care, always send the index.html */ return res.sendFile(distIndex); case '404': + /** don't care, always send the 404.html */ return res.sendFile(dist404); case 'none': /** let express do its default thing, don't alter behavior */ @@ -66,7 +71,7 @@ export const handleUnknownRoute: RequestHandler = async (req, res, next) => { } next(); }; - +/** helper function to match paths to their unhandled that might include vars and stars */ function matchRoute(req): (value: string, index: number, obj: string[]) => boolean { return (route) => { try { diff --git a/libs/scully/src/lib/utils/serverstuff/staticServer.ts b/libs/scully/src/lib/utils/serverstuff/staticServer.ts index 2062d51a1..59ff19a1a 100644 --- a/libs/scully/src/lib/utils/serverstuff/staticServer.ts +++ b/libs/scully/src/lib/utils/serverstuff/staticServer.ts @@ -24,7 +24,7 @@ export async function staticServer(port?: number) { port = port || scullyConfig.staticport; const hostName = scullyConfig.hostName; const scullyServer = express(); - const distFolder = join(scullyConfig.homeFolder, scullyConfig.distFolder); + const distFolder = join(scullyConfig.homeFolder, scullyConfig.hostFolder || scullyConfig.distFolder); if (tds) { dataServerInstance = await startDataServer(ssl); @@ -48,7 +48,7 @@ export async function staticServer(port?: number) { proxyAdd(scullyServer); scullyServer.use(injectReloadMiddleware); - scullyServer.use(express.static(scullyConfig.outDir, options)); + scullyServer.use(express.static(scullyConfig.outHostFolder || scullyConfig.outDir, options)); scullyServer.get('/scullySettings', (req, res) => { res.set('Content-Type', 'text/html'); return res.send(` @@ -60,17 +60,9 @@ export async function staticServer(port?: number) { `); }); - scullyServerInstance = addSSL(scullyServer, hostName, port).listen( - port, - hostName, - (x) => { - log( - `Scully static server started on "${yellow( - `http${ssl ? 's' : ''}://${hostName}:${port}/` - )}"` - ); - } - ); + scullyServerInstance = addSSL(scullyServer, hostName, port).listen(port, hostName, (x) => { + log(`Scully static server started on "${yellow(`http${ssl ? 's' : ''}://${hostName}:${port}/`)}"`); + }); const angularDistServer = express(); angularDistServer.use(compression()); @@ -93,23 +85,17 @@ export async function staticServer(port?: number) { angularDistServer.use(express.static(distFolder, options)); /** don't forget te top route. */ - angularDistServer.get('/', (req, res) => - res.sendFile(join(distFolder, '/index.html')) - ); + angularDistServer.get('/', (req, res) => res.sendFile(join(distFolder, '/index.html'))); angularDistServer.get('/*', handleUnknownRoute); - angularServerInstance = addSSL( - angularDistServer, + angularServerInstance = addSSL(angularDistServer, hostName, scullyConfig.appPort).listen( + scullyConfig.appPort, hostName, - scullyConfig.appPort - ).listen(scullyConfig.appPort, hostName, (x) => { - log( - `Angular distribution server started on "${yellow( - `http${ssl ? 's' : ''}://${hostName}:${scullyConfig.appPort}/` - )}" ` - ); - }); + (x) => { + log(`Angular distribution server started on "${yellow(`http${ssl ? 's' : ''}://${hostName}:${scullyConfig.appPort}/`)}" `); + } + ); return { angularDistServer, scullyServer, diff --git a/tests/jest/src/__tests__/__snapshots__/docsThere.spec.ts.snap b/tests/jest/src/__tests__/__snapshots__/docsThere.spec.ts.snap index 68210d68f..14b1bafd3 100644 --- a/tests/jest/src/__tests__/__snapshots__/docsThere.spec.ts.snap +++ b/tests/jest/src/__tests__/__snapshots__/docsThere.spec.ts.snap @@ -20657,6 +20657,13 @@ exports[`docsSite should have content for all markdown files check html for mark outDir +
  • + + outHostFolder + +
    • +
  • + + hostFolder + +
  • /** Array with string ID's of the content-renderers that will be run on all routes */ - defaultPostRenderers?: + defaultPostRenderers?: ( string - []; + | symbol)[]; @@ -20875,6 +20889,18 @@ exports[`docsSite should have content for all markdown files check html for mark string ; + + /** the folder used by the scully server to serve the generated files. defaults to outDir */ + + outHostFolder?: + + string + + ; @@ -20887,6 +20913,18 @@ exports[`docsSite should have content for all markdown files check html for mark string ; + + /** the folder used to serve the angular distribution files, defaults to distFolder */ + + hostFolder?: + + string + + ; @@ -21121,6 +21159,17 @@ exports[`docsSite should have content for all markdown files check html for mark - The folder's path where Scully leaves the statics files. This should not be the same as the distFolder.

    +

    + outHostFolder +

    +

    + + outHostFolder + + The folder that is used to host the static files, defaults to the outDir. You can use this when you need to change the baseHref of pages. +

    The default path is:

    @@ -21221,6 +21270,17 @@ options: file's default path. This option can be modify according to the needs. This folder will be used by Scully during rendering.

    +

    + hostFolder +

    +

    + + hostFolder + + The folder that is used to host the Angular distribution files, defaults to the distFolder. You can use this when changed the base-href with the Angular-CLI. Make sure the folders are matching the base-href settings, otherwise Scully will not be able to render your site. +