Skip to content

feat(scully): add support for different folders to host to aid i18n #744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jorgeucano merged 2 commits into from
Jul 15, 2020
Merged

feat(scully): add support for different folders to host to aid i18n #744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11798e3
feat(scully): add support for different folders to host to aid i18n
SanderElias Jul 15, 2020
a97edc6
docs(scully): add docs for the new feature
SanderElias Jul 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion docs/scully-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@ The `scully.<projectname>.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)
Expand All @@ -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 */
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand Down
4 changes: 4 additions & 0 deletions libs/scully/src/lib/utils/interfacesandenums.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
11 changes: 8 additions & 3 deletions libs/scully/src/lib/utils/serverstuff/handleUnknownRoute.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,23 @@ 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);
}
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 */
Expand All @@ -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 */
Expand All @@ -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 {
Expand Down
38 changes: 12 additions & 26 deletions libs/scully/src/lib/utils/serverstuff/staticServer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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(`
Expand All @@ -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());
Expand All @@ -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,
Expand Down
64 changes: 62 additions & 2 deletions tests/jest/src/__tests__/__snapshots__/docsThere.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20657,6 +20657,13 @@ exports[`docsSite should have content for all markdown files check html for mark
outDir
</a>
</li>
<li ="">
<a href="/docs/scully-configuration#outHostFolder"
=""
>
outHostFolder
</a>
</li>
<li ="">
<a href="/docs/scully-configuration#logfileseverity"
=""
Expand All @@ -20678,6 +20685,13 @@ exports[`docsSite should have content for all markdown files check html for mark
distFolder
</a>
</li>
<li ="">
<a href="/docs/scully-configuration#hostFolder"
=""
>
hostFolder
</a>
</li>
<li ="">
<a href="/docs/scully-configuration#routes"
=""
Expand Down Expand Up @@ -20844,13 +20858,13 @@ exports[`docsSite should have content for all markdown files check html for mark
>
/** Array with string ID's of the content-renderers that will be run on all routes */
</span>
defaultPostRenderers?:
defaultPostRenderers?: (
<span class="hljs-built_in"
=""
>
string
</span>
[];
| symbol)[];
<span class="hljs-comment"
=""
>
Expand All @@ -20875,6 +20889,18 @@ exports[`docsSite should have content for all markdown files check html for mark
string
</span>
;
<span class="hljs-comment"
=""
>
/** the folder used by the scully server to serve the generated files. defaults to outDir */
</span>
outHostFolder?:
<span class="hljs-built_in"
=""
>
string
</span>
;
<span class="hljs-comment"
=""
>
Expand All @@ -20887,6 +20913,18 @@ exports[`docsSite should have content for all markdown files check html for mark
string
</span>
;
<span class="hljs-comment"
=""
>
/** the folder used to serve the angular distribution files, defaults to distFolder */
</span>
hostFolder?:
<span class="hljs-built_in"
=""
>
string
</span>
;
<span class="hljs-comment"
=""
>
Expand Down Expand Up @@ -21121,6 +21159,17 @@ exports[`docsSite should have content for all markdown files check html for mark
</code>
- The folder's path where Scully leaves the statics files. This should not be the same as the distFolder.
</p>
<h3 id="outhostfolder"
=""
>
outHostFolder
</h3>
<p ="">
<code ="">
outHostFolder
</code>
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.
</p>
<p ="">
The default path is:
</p>
Expand Down Expand Up @@ -21221,6 +21270,17 @@ options:
</code>
file's default path. This option can be modify according to the needs. This folder will be used by Scully during rendering.
</p>
<h3 id="hostfolder"
=""
>
hostFolder
</h3>
<p ="">
<code ="">
hostFolder
</code>
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.
</p>
<h3 id="routes"
=""
>
Expand Down