A simple project step through…

Alrighty! Who is ready for this one, a simple step by step process of how I created a very simple e-commerce web application. This, wont in fact teach you how to code, nor will it make you feel as though you have mastered Full Stack Applications… by time you’re through, it will however, help to fill out a portfolio and serves to add to the undeniable importance of BUILDING applications, instead of overthinking the theory… That being said, this will be several blogs, from the first step of creating a new directory, to finally checking-out on our completed app. Let’s get going!

First thing first, let’s open up the terminal and create a new directory, by typing the command mkdir followed by your app name “ ….” I chose ecommerceApp… Then change into that directory, and now create a new Node.js project by typing “ npm init -y”. Should look like this…

After it loads up, it will show your package.json file that was created with the npm init -y command. After that, I am going to install a few dependencies, express and nodemon.

Express is going to help us create the web server, and nodemon is a dev tool, that automatically re-starts the web-server anytime a file is updated…. and believe me, it gets really old when youre stopping to figure out why its not working, only to find out that you forgot to turn the damned thing back on…

So now, if’n that worked….

From here, we can open up the code editor, I have the command “code .” installed in VSCode, which will open up what ever directory you are on in the terminal, in VSCode… At this point all you should see is is a node modules, package-lock.json, and package.json files… Go ahead and open up the package.json file, and here we are going to write a custom script that will allow us to run the server using the command “npm run dev”.

On line 7 you should see…

Lets replace the key of “test”: with “dev”:, and the change the value from “echo \”Error no test…” to instead read “nodemon index.js”…

And last to test that it works… create an index.js file in your app and give it the old obligatory console.log(“Hello world!”), type npm run dev into you terminal… navigate to your browser, go to localhost:3000/ and you should see the victory! Wonderful! Its now time to move onto the next step!

Lets create our server… If you are unfamiliar with this process I do have a separate blog express_setup that will be a little more specific, but ultimately lead you towards…

This is the first step of our sever, with a simple get route test… at this point you should see that the original text of “Hello World!” on your browser has changed to “hi there!” or whatever your new message says. Next let’s get started on filling out this route in a meaningful way that will be closer to our final product.

Now we are going to use express to handle our dirty work, and we are going to interpolate a very basic form using simple html written within our route handler…

Now we should have a very basic form in the browser, and if you type in the fields and hit Sign-up….

you should get an error, we are about to fix that by creating a simple post route…

Lets start by using our router handler for a Post request… and for now we will just send the string “Account created!”, to ensure that we are setting it up correctly…

and now, after filling in the input fields on your browser and hitting Sign up, that your page should now read “Account created!”…

Now… when we make a post request, our data is stored in the body of the request, and we will need a way to ensure that our information is actually parsed and correctly handled. For this we are going to use body-parser, a much more convenient library to call from, instead of building out our own middleware. So first we will require it…

then we will .use(it)…

if this is completely foreign to you I recommend looking at the docs… basically, a new body object containing the parsed data is created on the request object after the middleware…

Now then, to visualize that last statement, add a console.log(req.body) in your post route…

Now, refresh your browser manually, type in any new information into the form fields and hit “Sign up”, now take a look in the terminal and you should see the object that was created…

Here we can see that we are now supplying a neatly put together object of the data that we want to go through with our request. Later on in this series, we will tie in authentication and verification processes that will help to see why we need to parse the data in just such a way!