As with starting a new project, I want to start with an end in mind. The site that I want to make seems extremely simple on the surface but it will give a good introduction to the M.E.A.N stack as it uses all the 4 technologies. The site will allow users to search for specific escape characters for different programming languages. So why am I creating this site? Well first of all I am not familiar with any sort of site that aggregates all this information into one searchable place(if you know please inform me!) but the main reason is, I work with a variety of different programming languages weekly and I can never remember the escape characters for each language. I know there is a lot of crossover between programming languages e.g. adding another ‘\’ is very common but I just want to provide a central searchable place that provides examples of their usage.
Now that we have our project spec we need to list the pre-reqs:
- Text editor/IDE, I will use Atom : https://atom.io/
- NodeJS available here : https://nodejs.org/
- MongoDB available here: https://mongodb.com/download-center#community
- Express generator for easy project scaffolding (npm install express-generator)
I am not going to go through how to install each of these, mostly just clicking next.
Once we have all them installed lets generate our project. Open the command line(terminal if on mac or Linux) and run the following:
express --ejs EscapeCharactersHelper
Once that is finished you will have a bunch of files and folders.
Again if you have never used express generator it allows us to quickly generate project scaffolding for an express app. Now that we have our folder structure setup we need to add a few more files so we can use it for our purpose.
Inside the root folder create a file called package.json with the following: (This is just to setup the NodeJS dependencies)
Create database.js like so (This is the mongo database URL our application is going to connect to):
Create EscapeCharacter.js like so (This is setting up our database schema):
Last step is to verify your app.js looks like the following (This is just getting everything connected):
So after adding the rest of the files the folder structure should look like this (I have extra files relating to git):
That’s the base project setup now lets give it a test. Open up a command prompt and run the following:
npm install – This will install the dependencies
npm start – This starts our application, if this errors out right away make sure mongoDB is running.
Open up a browser navigate to : localhost:3000/ should look like:
Your welcome message might be different, although seeing any message means it is working!. If your application is not working drop a comment I will try help.
That is going to be it for this tutorial, it was short and simple but we got our base project setup that is now connecting to the database and verified as working in the browser. In the next tutorial we are going working with main.js and getting AngularJS working with the application.
Part 2 can be found here
Until next time