How can I deploy Frontity to a hosting with cPanel?

We have deployed one of our projects on Vercel. But we don’t want to host our website on Vercel. We use Inmotionhosting and Namecheap hosting. We tried to upload the build file on our hosting. But that is not working.
Would you please help us to solve the problem?

Hey @aslamhasib welcome to the community :blush:

First, please accept our apologies for the lack of guidance in our docs when it comes to deploying a Frontity site in different hostings. We are actively working on it.

Let us help you with your request:

  • Does your hosting provide support for nodejs?
  • If so, can you detail the steps you followed to upload the Frontity App to it?

Lastly, if your hosting has support for Node and they use cPanel here you have a thread were some community members explain the steps they followed in order to deploy the app: Manual install method node cpanel?

Hello @Pablo
our hosting supports Nodejs.

These are the steps I followed, but not working.

  1. Created a subdomain
  2. Uploaded the project files to cPanel. Here is the file list. Screenshot (1) attached
  3. From cPanel terminal navigated to the project folder and ran the command “npm install” and “npm run build”
  4. Added “.htaccess” file which contains this. Screenshot 2 (attached) and app.js file which contains this. Screenshot 3 (attached)
  5. Then run the command “nohup node app.js &”
  6. But getting “Internal server error” as output from the URL - Screenshot 4 (attached)!

As there is a limitation to upload only one image, I am sharing the link of the screenshot

Hi @aslamhasib,

Every hosting will have its own particularities but let me explain a few things that can help you to execute a Frontity project in any hosting w/ Node.js support

build process

When you do npx frontity build you generate a build folder w/ several files.
You’ll get something similar to this…

├── build
│   ├── analyze
│   │   ├── module-development.html
│   │   └── server-development.html
│   ├── bundling
│   │   ├── chunks.module.json
│   │   └── entry-points
│   │       ├── server.ts
│   │       └── my-frontity-project
│   │           └── client.ts
│   ├── server.js
│   └── static
           ...
│       ├── xxxxx1.module.js
│       ├── xxxxx2.module.js

The most important file for deployments in any hosting is server.js that is actually a middleware that can be inserted in a custom web server.

npx frontity serve

You can directly execute this server.js by using the command npx frontity serve

So, easy way of executing a Frontity project in any Node.js server

  • launch remotely npx frontity build to generate the build folder
  • launch remotely npx frontity serve to launch a web server that makes use of the server.js generated in the previous step

using server.js as a middleware

But you can also use this generated server.js as part of a custom server like it’s mentioned here…

// lambda.js
const awsServerlessExpress = require("aws-serverless-express");
const app = require("./build/server.js").default;
const server = awsServerlessExpress.createServer(app);

exports.handler = (event, context) => {
  awsServerlessExpress.proxy(server, event, context);
};

Or like you have done in your app.js


By reading the steps you’re following it seems you are doing everything right.

Next steps I’d do to find out what’s going on in your hosting:

  • Verify the build folder is properly created in your hosting server
  • Check the logs of your server
  • Check locally the architecture you’re trying to launch in your remote hosting
  • Remove (or simplify) the .htaccess to check if there’s a problem there

Hope this helps!

1 Like

→ After running the “npx frontity build” I get these folders inside the build directory. (Screenshot 1 )

→ Then I ran “npx frontity serve” command and get this output. Screenshot - (Screenshot 2 )

→ I accidently put backticks in .htaccess file, then after removing that there are no internal server error but now it only shows the loading screen. Screenshot of .htaccess file - (Screenshot 3 )

→ Then I tried “node app.js” command, this also make the loading screen.

→ Here is the screenshot of server error log (Screenshot 4)

Hi @aslamhasib

I’m afraid we’re not able to view your latest batch of screenshots.

Hello @mburridge
Would you please try now?