7

I'm trying to develop an app that uses Strapi Admin Panel api generation, and, at the same time, serves as a website that consumes this api.

So, basically, I'm trying to build a website:

  • where /api route servers as a Strapi API endpoint

  • where /admin route serves as a Strapi Admin Panel for API creation

  • where all the other routes are configured to serve my website, i.e.:

    • / route is the landing page of my website

    • /contacts is the contacts page

    • etc.

  • And, moreover, the static files of the website (html/css/etc) should be served from the server that, respectively, consumes the generated API (server-side).

I hope I'm not expressing myself too vaguely.

Essentially, I need to integrate one node.js app (my website) with another node.js app (Strapi) in such a way that they work seamlessly together as one.

Does anybody know how to achieve that?

I've read some answers here on Stackoverflow and on Strapi GitHub issues, and some people said that the way to achieve that is to run two separate apps on different ports, but it doesn't feel right to me (or maybe I just don't understand some basic stuff).

What I need is to make a single app that is, basically, a simple multi-page website, but enhanced with api generation tools from Strapi.

I have my Strapi app up and running and I thought maybe I should find some place in the app folder structure to put my website (i.e. all the static stuff to the public folder), but where to put the server-side stuff?

And I'll need to use a templating engine, so the question of "where to put the client-side files" arises again. The more I dig into the code, the more I get confused.

PS: I'm fine using Koa which is used as a server for Strapi.

PPS: Further, I'm planning to deploy the app to Heroku on a single Dyno (if it is important).

Denis Yakovenko
  • 3,241
  • 6
  • 48
  • 82
  • Why do you need an other node process for your website ? – Jim LAURIE Jun 20 '19 at 15:36
  • 2
    @JimLAURIE That's quite the opposite of what I need. What I need to achieve is to integrate Strapi and my node app to work as one (as one node process), so that at `/api` route would be the strapi api endpoint, at `/admin` route would be admin panel, and for all the other routes the app would either serve server-generated static html files or respond with json from api. So that altogether it should be one single application, just enhanced with Strapi tools like admin panel and api generation. However, I don't seem to understand how to achieve that:( – Denis Yakovenko Jun 20 '19 at 20:08

2 Answers2

7

Okay I just played with the routing prefix and that is the solution I suggest you.

So you will have to build you website app. And push the build in the ./public folder of the Strapi application.

Then in your api/.../config/routes.json files you will have to add an option prefix in the config key of each of your routes and for all your APIs

{
  "routes": [
    {
      "method": "POST",
      "path": "/restaurants",
      "handler": "Restaurant.create",
      "config": {
        "policies": [],
        "prefix": "/api"
      }
    }
  ]
}
  • So at the end you will have your admin on /admin
  • Your APIs endpoints prefixed by /api
  • And your website/assets on /
Jim LAURIE
  • 3,859
  • 1
  • 11
  • 14
0

I found myself in a similar situation. In my situation I wanted to deploy Strapi along with a static site (in my case built with Gatsby) just in one server instance, at least to try if possible.

There are some open questions left from the original post, so let me answer them based on my context:

First of all, yes it's possible. But each app has to function on their own port. In that way your server knows which one to serve based on the request. Trying to mix them into a single port will mess a lot both apps.

In my situation, what I end up doing is to have Strapi running in Port 1337 and serve my static page in Port 80. In order to achieve that I used NGINX for serving content and work as a proxy. I first tried to have them on the same domain, but got a lot of conflicts. So I strongly suggest to use subdomains. So I ended up like this:

  • domain.com serving my static page
  • api.domain.com serving Strapi

You can achieve that having your configuration file in NGINX like:

server {
    server_name domain.com www.domain.com;
    root /var/www/domain.com/html;
}

server {
    server_name api.domain.com
    location / {
         proxy_pass http://127.0.0.1:1337;
         proxy_http_version 1.1;
    }
}

As you can see there is a lot of configuration you will need to perform, so I won't recommend trying something like this in Heroku since you really don't have much control of the Dyno (ports, routing, etc). If you want to go with Heroku then, you should have a separate Dyno for each app. One for Strapi and a separate one for the other app.

I would strongly suggest something like DigitalOcean or any other where you have total control over your server in Digital Ocean called a Droplet. I was able to install on the same Droplet an instance of Strapi and serve my static site built in Gatsby.

CoderPug
  • 908
  • 9
  • 19