Deploying Headless Strapi to Netlify and Digital Ocean — Part 2: The Admin Panel UI

We are going to start with what I consider the easiest part. Netlify is a fantastic tool with a great free tier that we are going to deploy our Strapi Admin Panel (and have already deployed our Nuxt website). They offer static hosting and because Strapi's Admin Panel is a React app we can simply build it and deploy separately.

Why set up the admin UI before the API? The main reason is that it's easier to hit the ground running once you launch the API server and the API won't be vulnerable to someone hijacking and setting up the admin user before we can!

Remember: We are assuming you already have a domain and it is using Netlify DNS. For instructions on that go here.

Before we deploy, we just need to tweak a few settings in our Strapi project. In production we need to tell the API to not build or serve the admin panel since it will run on Netlify. Let's update the production server config:

config/env/production/server.js

module.exports = ({ env }) => ({
    host: env("HOST", "127.0.0.1"),
    port: env.int("PORT", 1337), 
    url: "https://api.frontendcuts.dev", 
    admin: {
        url: "https://admin.frontendcuts.dev", 
        serveAdminPanel: false,
    },
});

Note this file lives under the /production/ folder in env. This lets strapi know to only use it when NODE_ENV is set to 'production.'

Let's go through each setting:

• host — when we deploy the API to our Digital Ocean droplet we are telling the API to use 127.0.0.1 (local loopback) as our host
• port — goes with the host and adds the port
• url — tells the admin UI what the base url is for the API
• admin.url — url path for admin UI resources. This is important when running the UI on netlify! Since our admin UI builds into a folder build/ and all the resources live at the root folder level we need to set this so it can load the javascript, css, html, and other resources properly. It's also used in password reset.
• admin.serveAdminPanel — tells the API not to serve the admin UI resources

Ok, we are ready to deploy! Here comes the screenshots...

Deploy the Admin UI to Netlify

Once logged in, click the button "New Site from Git"

Setup your build settings like this:

Let it go and watch it build. Now we need to add a DNS record. Since you are using Netlify DNS for the primary domain we can head over to the domains page and add a domain alias:

This change might take a few hours so be patient while DNS propagates!

Now try to visit your admin site and you should see a blank white page with a loading spinner. If you open the admin console you will see that our UI resources loaded but it failed to call the API (since we don't have a server up yet!). Also note the request url it tried to call for init. The base url should match the url property we put in our config/env/production/server.js file above.

If your resources load and your init base url looks correct then congrats! we just deployed the admin UI to netlify!

Now let's create our droplet and hook this thing up

Part 3: Create and Configure Our Droplet