Going Live with Your Final Project for Web 2

Before getting started, make sure everything is working on your dev environment (localhost).

You'll need to be able to login to your cPanel dashboard.

Create a sub domain for your final project.

In the cPanel dashboard, scroll down to the section on 'Domains' and click on Domains

  1. Click the Create a New Domain button.
  2. Set the Domain to web2. followed by YOUR domain name (so, for example, if your domain is 'example.com' then you would enter web2.example.com).
  3. Make sure to uncheck the checkbox to 'Share document root' (we don't want to share the document root). I'm not sure if it will be checked, or not, by default.
  4. The textbox next to /public_html/ should automatically populate for you (it should be the same as what the Domain textbox is set to).
  5. Click Submit

You have just created a sub domain of your main domain. Sub domains are one way of hosting multiple websites on a single web server.

Note that this will create a folder inside the public_html folder (on your server). The folder will have a name of web2.yourdomain.name (yourdomain.name will be YOUR domain). In one of the upcoming steps, you'll have to modify a file inside this folder.

Create a Node application

Return to the cPanel dashboard by clicking on the Tools link.

In the cPanel dashboard, scroll down to the Software section and click on the Setup Node.js App option.

  1. Click the Create Application button
  2. Set the Node.js version to 20 (there may be some decimal places in the version number, ex: 20.17.0)
  3. Set the Application mode to Production
  4. Set the Application Root to web2-final-project (this will create a folder, which will be a sibling of your public_html folder on the server).
  5. For the Application URL, choose the subdomain that you created previously
  6. Set the Application startup file to app.js
  7. Click the Create button

You have just created a folder (named 'web2-final-project') on your web server that will contain the files for your final project. You've also configured the runtime (Node version 20) and the start up file (app.js).

The next step is to 'register' your application.

Register an Application in cPanel

Return to the cPanel dashboard, scroll down to the Software section, and click on Application Manager

  1. Click the Register Application button
  2. For the Application name, enter web2-app
  3. For the Deployment Domain, select the subdomain you created previously
  4. You can leave the Base Application URL alone (it should default to a forward slash)
  5. Set the Application Path to web2-final-project (this is the folder that has all files/code for your app)
  6. Click the Deploy button

You have just 'registered' your app, but now we have to do something a little strange before it will work.

Deleting Entries from the Application's .htaccess file

In the previous step we registered an application in cPanel, which created some files and put them in the web2.yourdomain.name folder (which should be inside your public_html folder). One of the files created in this folder is named .htaccess and we need to edit it. We'll use FileManager in cPanel to edit this file.

In the cPanel dashboard, scroll down to the Files section and click on File Manager. You should see all of the files on your live server.

  1. Double click on the icon for the public_html folder, to open the public_html folder.
  2. You should see a folder with the same name as the subdomain that you created (web2.yourdomain.name), open this folder.
  3. You might see an .htaccess file. If you don't see the .htaccess file, then do the following steps:
    1. Click the Settings button in the upper right corner of File Manager
    2. Click the checkbox to Show Hidden files (dotfiles).
    3. Click the Save button.
  4. Now, right-click on the .htaccess file, and choose Edit
  5. Comment out all the lines that begin with 'Passanger'. To do this put a hash tag # at the beginning of the line.
  6. Click the Save Changes button

I'm not sure why we have to do this, but your app won't work unless it's done.

NOTE: After you save your changes to this file, open it again to make sure the changes actually got saved. I could swear that they don't always get saved, or maybe I'm going crazy!

Now, if you visit your subdomain in the browser (web2.yourdomain.name), you should see a message saying that that says 'It works!'

Copy your files to the live server

The application that you just looked at in your browser is the sample one that gets created when you setup a NodeJS application in cPanel.

Now we'll replace this sample app with the code for you node final project.

The following files/folders must be copied from your node-final-project folder (on your development computer) to the web2-final-project folder on your live server (remember that the web2-final-project folder is a sibling of the public_html folder):

  1. app.js
  2. package.json
  3. modules
  4. public
  5. views
  6. blog

Notice that we did not include the node_modules folder. You can install the packages that the app depends on in cPanel by following these steps:

  1. In the cPanel dashboard, scroll down to the Software section and click on Setup Node.js App
  2. Click the pencil icon to Edit the Node app you created earlier.
  3. Scroll down a bit, and click the button to Run NPM Install
  4. This should create a node_modules folder on your live server, and install the required packages (based on what's in the package.json file)

It may take a few mintues for the packages to install. And, I actually saw an error message appear in a little red box, but everything still worked. To see if it worked for you, open a browser window and go to web2.yourdomain.name.

Updating the app on your live server

If you add .md files, or make changes to the code, then you'll need to update the files to the web2-final-project folder on the live server AND you might have to stop and start the app. After you upload the files, you can restart the app by logging into cPanel and clicking on Setup Node.js App. From there you can click the icon to restart your app.