How to serve a static site within keystone?

Question

I have one keystone based site and a completely static one.

I would like to integrate the static one into the first one. All the requests to "/" will serve the static one but requests under "/resources" would serve the keystone site.

basically:

"/"            would serve the static folder 'site'
"/resources"   would serve the keystone app

At the moment my structure is:

public
| - keystone
| - site

And my keystone static option is set on 'public'

    'static': 'public'

How would I go to set up these routes?

I was thinking of using a middleware in this way:

app.use("/", express.static(__dirname + "/site"));
app.use("/resources", express.static(__dirname + "/keystone"));

But how would I do it in keystone?

Answer 1

You don't need any extra middleware. With the option 'static' : 'public', any static content placed in the public folder within your project folder will be served as static content.

It is also possible to define more than one directory by providing an array of directories like this 'static' : ['public','site'] this way everything in the directory site will also be served.

I assume you want some kind of index.html to be loaded when someone hits your sites root. You can achieve tha by adding a redirect to your /routes/index.js. Simply add keystone.redirect('/', '/index.html'); or whatever the filename is you want to get served. You also have to remove the keystone route to '/'

Answer 2

I achieved this by just editing one line in the routes/index.js file, and adding the directory name in the keystone.init() "static" setting. Now all files in "client" directory get served under the root of my site URL, and Keystone lives at www.yoursite.com/resources

Step 1

Edit routes/index.js:

Change:

app.get('/', routes.views.index);

To:

app.get('/resources', routes.views.index);

Step 2

edit keystone.js:

Change

keystone.init({
    ...
    'static': 'public',
    ...

To

keystone.init({
    ...
    'static': ['public','client']
    ...

```

Step 3

Add site files, including index.html, into a new folder called "client".

Keep in mind that Node will also load files that are in the "public" folder. For example, currently keystone has a file called "logo-email.gif" in public/images. This means that www.yoursite.com/images/logo-email.gif will load that image. It turns out that if there is both a file public/images/logo-email.gif and client/images/logo-email.gif, then the image in public takes precedence. If you reverse the 'static' attribute in keystone.init() so that it says ['client','public'] then the image in "client" takes precedence

Answer 3

KeystoneJS v5, I used this way:

module.exports = {
  keystone,
  apps: [
    new GraphQLApp(),
    new StaticApp({path:"/", src:'public'}), // for your static site
    new StaticApp({path:"/resources", src:'static'}), // Keystone uploaded resources
    new AdminUIApp({
      enableDefaultRoute: true,
      authStrategy,
    })
  ]}