If you are new web development, it can be a steep learning curve to get started. Sometimes grabbing a codebase, preferably one abound with explanatory comments, is an efficient way to learn.
In this post, I will outline the code that I use to get started on web development projects. With this code, you will have a functioning web server written in Node.js with open routes to create/read/update/delete users as well as functioning user authentication (sign up, log in, log out) and error/success banners (delivered through a package called flash). Additionally, you can easily tweak the data expected for each user and display it in your application of choice. There are lots of comments for any skill level to follow along. Clone this GitHub for the code repository.
Before diving in to the code base, if you are brand new to web development and looking for a course to learn the fundamentals, my recommendation is The Web Developer Bootcamp by Colt Steele. This course has a great amount of quality content and is highly popular (at the time I wrote this post, it had over 440,000 students signed up on Udemy.com). Disclaimer- this endorsement does not benefit me in any way.
The original purpose for this code (and the way it is currently set up) was to have the following ways to access the database:
- companies can UPDATE their data (via website)
- only I (you) can CREATE/DELETE a companies data as needed (via a “secret” route on website)
- end user application can READ data (via API call which returns JSON data)
The website has a “secret” route (a route not linked to on any of the website’s other webpages) for me (you) to CREATE/DELETE companies. Note: If this is not desired, you can easily link to the create route (get request to /add/company/new) on any webpage.
It has “non-secret” routes for company log in/UPDATING their data.
And it has a READ route (returns JSON format) that reads all users’ data and converts it to JSON format for reading by an end user application such as a react native application or another webpage.
Of course, you may not want this particular functionality and if you have trouble tailoring it to your project or any other specific questions, feel free to contact me at nicholasjweimer@gmail.com.
As for database schemas, there are two: Company and Post. The Company schema stores username and password. It associates a post for that company in a 1-to-1 relationship. The Post schema has the company’s city, location, thumbnail image, and url.
Running the Codebase
You will need to have Node JS (https://nodejs.org/en/download/) and MongoDB installed (https://www.mongodb.com/download-center/community).
Installing MongoDB is optional here and there is hard-coded data in server.js that is commented out and can be uncommented in place of a database.
Next, simply clone this full repository to your local machine, navigate to the folder in your command line and run:
npm install
The command “npm install” will install Express (web development framework) and all other node dependencies listed in package.json. Npm is the Node Package Manager, which handles installation of node packages.
Lastly, you need to start the web server. If you are using the MongoDB data server as well, you’ll need to start that database server before the web server. To start the MongoDB database server, head to this documentation and follow the instructions for your particular operating system. To start the web server, navigate on the command line to the project directory folder which stores the server.js code and run:
node server.js
That’s it! Your server is running on http://localhost:5000, so head to that route in a web browser of your choice and check it out!
Good luck and happy coding. Below I’ve included more about the routes.
READ Route:
- get request to: /api/read
CREATE Route:
- get request to: /add/company/new
- renders new.ejs, the form to create a new user
- post request to: /add/company/new
- creates new company and associates empty post data with that company
- get request to: /add/company/new
UPDATE Route:
- get request to: /update/:id (company id)
- renders edit.ejs which shows a logged-in company their information and give them ability to update
- post request to: /update/:id (company id)
- updates any data that the company changed via edit.ejs
- get request to: /update/:id (company id)
DELETE Route:
- delete request to: /company/:id
- deletes a company. Available from new.ejs (/add/company/new) when logged in as that company
- delete request to: /company/:id
Login Route
- get request to: /login
- renders login.ejs, the form to login for a company
- post request to: /login
- logs a company in and redirects to home page
- get request to: /logout
- logs a company out and redirects to home page
- get request to: /login