School admin app with NextJS on Linode

Introduction

Hi 👋, in this post we shall see how to deploy a school management web app with some fundamental functionalities, on Linode, and then see some screenshots from the running app. You may click here to check the GitHub repo.

Instance

Let's launch an instance on Linode. Go to this link and create an instance with the following spec.

Ubuntu 
2 CPU Cores, 80 GB Storage 4 GB RAM

Plan: Linode 4 GB
Region: Mumbai, IN

Hostname

SSH into the instance as root user with either password or SSH key as relevant, and change the hostname which should be effective from next login.

root@localhost:~# hostname  sms

Node

Let's install nodejs on our system.

root@sms:~#  wget https://nodejs.org/dist/v18.4.0/node-v18.4.0-linux-x64.tar.xz
root@sms# tar -xvJf node-v18.4.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
root@sms# rm node-v18.4.0-linux-x64.tar.xz

Add a user

Add a new user, so that we can do rest of the operations as that user

# adduser sms
Adding user `sms' ...
Adding new group `sms' (1000) ...
Adding new user `sms' (1000) with group `sms' ...
Creating home directory `/home/sms' ...
Copying files from `/etc/skel' ...
New password:
Retype new password:
passwd: password updated successfully
Changing the user information for sms
Enter the new value, or press ENTER for the default
        Full Name []:
        Room Number []:
        Work Phone []:
        Home Phone []:
        Other []:
Is the information correct? [Y/n] Y

Once the user is added, you may exit the shell and relogin as new user.

Sudo

We can add the new user to the sudo group, to run commands that may require sudo privileges.

root@sms:~# usermod -aG sudo sms

We can validate using the id command.

root@sms:~# id sms
uid=1000(sms) gid=1000(sms) groups=1000(sms),27(sudo)

So the user sms belongs to two groups sms and sudo.

Path

Update path to access node and npm.

sms@sms:~$ export PATH=/usr/local/lib/nodejs/node-v18.4.0-linux-x64/bin:$PATH
sms@sms:~ .  ~/.profile

Validate.

sms@sms:~$ node -v
v18.4.0
sms@sms:~$ npm -v
8.12.1

Clone

Clone the code from github.

sms@sms:~$ git clone https://github.com/networkandcode/sms.git

Backend

I have used Appwrite for authentication, and HarperDB as database. You may click on the respective hyperlinks for instructions to set up those on Linode.

Appwrite

Update the platform settings on Appwrite, to allow requests from the client, you can either use the IP or domain. In this case I can use the public IP of the instance we have launched in this post.

Variables

Change directory and set the environment variables.

sms@sms:~$ cd sms
sms@sms:~/sms$ cat .env
APPWRITE_API_KEY=<value>
HARPERDB_URL=<value>
HARPERDB_USERNAME=<value>
HARPERDB_PASSWORD=<value>
NEXT_PUBLIC_APPWRITE_SUPER_ADMINS=<value>
NEXT_PUBLIC_APPWRITE_EMAIL_VERIFICATION_URL=<value>
NEXT_PUBLIC_APPWRITE_ENDPOINT=<value>
NEXT_PUBLIC_APPWRITE_NEW_MEMBER_URL=<value>
NEXT_PUBLIC_APPWRITE_PROJECT_ID=<value>

Please replace with actual values.

Install

We can install all the modules defined in package.json using npm.

sms@sms:~/sms$ npm i
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 300 packages, and audited 301 packages in 7s

79 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.12.1 -> 8.13.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.13.1
npm notice Run npm install -g npm@8.13.1 to update!
npm notice

So there are no vulnerabilties as per the output above. We can also try npm audit.

sms@sms:~/sms$ npm audit
found 0 vulnerabilities

Dev

First, let's run it in development mode.

sms@sms:~/sms$ npm run  dev

> sms@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/sms/sms/.env
wait  - compiling...
event - compiled client and server successfully in 2.9s (212 modules)
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

The website should now be available on port 3000, we can check it on the browser with the public IP of the instance.

Once logged in, you should see a screen like below. Home screen

For the first time, when logged in as super admin, the generate tables link at the bottom can be clicked, to generate tables in HarperDB.

Press Ctrl ^ C to stop the running application.

Build

Now we can make a build and run it.

sms@sms:~/sms$ npm run build
sms@sms:~/sms$ npm run start

> sms@0.1.0 start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/sms/sms/.env