Trouble deploying a MERN app to Namecheap's cPanel for web hosting

Viewed 978

I couldn't solve a certain Heroku issue (image storage/retrieval) so I'm trying my hand at Namecheap.

I purchased a domain and web host server from Namecheap, so I can deploy my completed MERN stack app I made for a client.

App file structure:

AppName
|
--client        <<~~create-react-app
|
--middleware
|
--models
|
--node_modules
|
--routes
|
--uploads
|
--.env
|
--.gitignore
|
--package-lock.json
|
--package.json
|
--README.md
|
--server.js
  • Set my domain's Nameserver to Namecheap Web hosting DNS (namecheap guide instructions)

  • Ran npm run build in /client (did not do serve -s build though) to generate /client/build

server.js

// For Deployment
if(process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, 'client', 'build')));

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
  });
};
  • Connected my git repo to the domain via Git Version Control cPanel option

  • Uploaded all my app files to cPanel File Manager (done automatically by Git Version Control)

  • Used cPanel's Setup NodeJS App feature

Setting up the NodeJS App requires a number of form fields:

NodeJS version: 12.19.1           <<~~slightly higher than mine, their support team advised me to do that

Application mode: Production

Application root: repositories/AppName           <<~~path from the cPanel File Manager

Application URL: my-domain.com

Application Startup File: repositories/ChrisPortfolio/client/build/index.html           <<~~this has been a guessing game, more notes below

As for Application Startup File, I tried server.js and experimented with a few things here.

Everything I tried led to, visiting the app in the browser and hitting a "Not Found" page.

With repositories/ChrisPortfolio/client/build/index.html however, the app says "It works!" and displays the Node version I selected, but.. it doesn't show the actual app.

There is an option to run npm install from inside the cPanel NodeJS dashboard, and I made sure to do that.

I think perhaps I need to have it run npm install inside the /client directory as well, but the dashboard does not let you choose from where you wish to run the command.

Anyways, this is where I'm at. Hopefully this is familiar to someone.

1 Answers

Solved deployment by:

cPanel's Git Version Control option to clone my repo, creating /home/username/repositories/appname directory in my File Manager

After running npm run build in my /client, directly uploading the contents of /build to /home/username/public_html (it needs index.html at the root of this folder)

cPanel's Setup NodeJS App feature, referencing the directory mentioned above as Application Root, and server.js as Application Startup File

App is now deployed.

Related