Edit root page strapi

Questions and Answers
1
System Information
  • Strapi Version: 4.11.7
  • Operating System: debian 11
  • Database: mysql
  • Node Version: 16.20.1
  • NPM Version: 8.19.4

i would like to customize this page, this is the default / page, i tried adding an index.html but it works only if i go directly to /index.html, not very useful i found the ability to disable the serving of this page disabling the defaultIndex in the public middleware config, but is it possible to have a custom page ? to exposing too much info. and maybe a redirect to the url of the front app would be better, but without interfering with the api function

this page:

immagine
immagine877×379 22.3 KB

2

Hey @Darkmagister,

Same here. I’m trying to edit this page, but without success yet.
I’ve already tried this solution here but it’s not working.

3

Under version 4, the same ‘public’ middleware exists, but it looks for the index page template only within the Strapi node module (in the folder packages/core/strapi/lib/middlewares/public). Sadly it looks like this template wasn’t built to be customised - i.e. you can’t just configure the location of a different template. However, you can add new routes into Koa, that replace the default routes. This is used, for example, in redirecting requests for the home page to return the admin page (admin-redirect | Strapi Documentation). If you want a custom home page, instead of using ctx.redirect you can provide your own Koa handler that returns your custom page as the response.

I suggest you look at the code on Github to see how the default home page is created and returned, to give you ideas about how to build your own home page.

4

I found a solution. Recently i’ve installed strapi 4.16.2 for my client. My client want to see login page as root url. To do this i created a global middleware using strapi cli
Type npm run strapi generate in terminal then select middleware and give middleware name.
then select first option Add middleware to root of project
your global middleware is created in src/middlewares/your_middleware.ts
Now replace code below

import { Strapi } from “@strapi/strapi”;
export default (config, { strapi }: { strapi: Strapi }) => {

return async (ctx, next) => {
// use ctx.request to get request method and request path
if (ctx.request.method === “GET” && ctx.request.path === “/”) {
// use ctx.response.redirect(url,alt) to redirect root url to your admin url
ctx.response.redirect(“/your_desire_url”, “/admin”);
}
await next();
};
};

To activate your middleware open config/middlewares.ts and add this line
global::your_middleware_name,

Now run strapi app and see the result.

1 Like
5

I got it to work, meaning; when going to the root http://localhost:1337 you get your custom index.html

// src/middlewares/home.js

const fs = require('fs');
const path = require('path');

/** override index.html
 * @see https://docs.strapi.io/dev-docs/deployment/snippets-proxy/admin-redirect#redirecting-landing-page-to-admin-panel
 */
module.exports = (_config, { strapi }) => {
  const redirects = ['/', '/index.html'].map((routePath) => ({
    method: 'GET',
    path: routePath,
    // redirects to admin panel
    // handler: (ctx) => ctx.redirect('/admin'),
    // ship the index.html using koa-send (doesn't work)
    handler: (ctx) => {
      console.log('🚀 ~ file: home.js ~ line 5 ~ _config', _config);
      // Read the index.html file
      const filePath = path.resolve(__dirname, '../../public/index.html');
      const fileContents = fs.readFileSync(filePath, 'utf8');

      // Set the Content-Type header and send the file contents
      ctx.type = 'html';
      ctx.body = fileContents;
    },
    config: { auth: false },
  }));

  strapi.server.routes(redirects);
};

// config/middlewares.ts
export default [
  'strapi::logger',
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  { resolve: '../src/middlewares/home' },
  'strapi::public',
];

I would love to the the Typescript version to work, and I was recommended to use koa-send instead

1 Like