Public Folder for each Domain

[inspiretk]

I got working using public folder for each domain. If someone else has their better solution please share.

In main index.js file where express server is running, I did this inside main(). So put between the code const server = express() and server.get.

   const server = express()
   const domainMap =
    {
        'englishsetterlovers':{
             'publicDir':'englishsetterlovers',
        },
        'veggies':{
             'publicDir':'veggies',
        }
    }
    server.use((req, res, next) => {
        let hostName2 = req.headers.host;
        let hostName = hostName2.split(':') // only get domain name without extension
        let options = domainMap[hostName[0]]; // get the domain name only, not the extension
        if (options && options.publicDir) {
            let middleware = express.static(path.join (__dirname, 'public', options.publicDir)); // public folder inside root
            middleware(req, res, next);
        } else {
            // nothing to do here, keep routing
            next();
        }
    })
    server
    .get('*', (req, res) => krabs(req, res, handle, app))

So in root, create folder public. Then create subfolders for each of your domain. Create subfolder englishsetterlovers, and veggies.

The domainMap: You put your domains in there. I'm sure you can create a file for this and import that in, that way you dont hardcode it into your index.js file.

When on production using real domain name, you can replace : with . This will use your domain name without the extension. I did the : because of my localhost being domain name + :3000 with no extension. eg http://veggies:3000.
let hostName = hostName2.split(':')
replace with
let hostName = hostName2.split('.')

I did this way because example using of favicon. I got this answer from https://stackoverflow.com/questions/60025303/set-express-static-directory-dynamically

[micheleriva]

@inspiretk, thanks for sharing! Let me think of a way to include that inside the config file without extra configurations or scripts. Of course, I'm open to PRs 🙂

[sahanpd]

I'm currently setting up a project with krabs and I wanted to do the same thing...It will be really neat if we can add it to the config file. Keep up the good work....Cheers!

[micheleriva]

@sahanpd absolutely, I clearly see that as a legit need. I'll keep you all updated 🙂

[inspiretk]

There are issues with <Image> tag from next/link. Next link's src will be / goes to root of public folder. Eg /veggies/filename. However <img> will work as normal /filename.

So Next link has access to other sites, whereas image tag dont.

So for me, I will just hardcode a variable to take the site's public folder when using Next Image tag. eg

const site = 'veggies'

<Image src={`/${site}/imagefilename.png`} width={500} height={150} alt=''/>

Micheleriva - thanks for your youtube video. Helped me set it up easily. Without that video, I wouldn't be able to follow the documentation. Videos for me, just helps setting it up much easier with documentation.

[micheleriva]

@inspiretk, thanks again for your feedback; I really appreciated 🙏

I guess you can take the site variable server-side, as Krabs injects the current tenant you're rendering inside the ctx.req variable (for instance: ctx.req.tenant.name returns the name of the current tenant), that could make things a bit easier for now. In the meanwhile, let me think of something for making it even easier. 😄

About the YouTube video, I think I'll record a new one with more advanced use cases as soon as I roll out new features, so it can be easier for everyone to stay up-to-date 😄