Hi all,
Initially, I had quite a lot of difficulties with this project. It was hugely frustrating in the beginning until I figured out a process to faster test my code. In the end, I learned a lot from this project.
Here are some tips if you are just getting started.
1. Installing the project
The first problem I got was getting errors when I tried to run the npm install
command after downloading the project.
Running the following commands worked for me:
npm install --force
npm audit fix --force
Not all errors was removed but still the app was functional (see next point).
2. Start the local Express web server
After running the commands in point 1 I wanted to see if the local Express web server would actually run.
I added the following code to the end of the server.js file:
if (!module.parent) {
// Add your code to start the server listening at PORT below:
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
}
After this in the terminal, I used the command: node server.js
The Express web server started and in the terminal, you get the expected message:
Server listening to port 4001
I think it would be nice if the Codeacademy team would add this explicitly to their âHow to Beginâ description of the project.
3. How to access index.html in the browser
My next problem was accessing the main application i.e. the index.html file which is the starting point for the entire application.
I entered this in the browser: http://localhost:4001/index.html
I hit Enter and it resulted in the following output in the browser: Cannot GET /index.html
After searching through the Codeacademy forum I found different proposals on solutions for this.
The best (in my view) is this:
In server.js in line 6 (just after module.exports = app) add this line of code:
app.use(express.static(__dirname))
This line of code enables the Express web server to serve static files (index.html is a static file).
In Express terminology: It adds a middleware for serving static files to your Express app. You can use the express.static() middleware function to make it possible to access files from this folder via HTTP.
The __dirname
is a global object in Node that provides the name of the directory where the executing script (server.js) resides. In this project, the index.html file is in the same directory as server.js i.e. __dirname
will allow Express to server static files in the same directory as server.js.
Based on what I read in the forum it appears that without this middleware function, the index.html file must be loaded manually from the local file system in the browser by for example using âOpen fileâ in Chrome.
That doesnât make sense to me as we are learning web development and surely the application we built should be served via a web server infrastructure.
Again, could be nice if the âHow to beginâ section would provide some tips on how to access and use the index.html page.
4. Using Postman to test and debug routes
When I started the work to implement the API routes I found it frustrating to use the index.html app to test the code for the routes. Especially I found it frustrating with the PUT and POST requests.
Their new/updated resources must be sent in the request bodies and for me to fully understand what is going on I would like to see this code.
So I started to experiment with Postman: https://www.postman.com
Postman is an application that I have used before to test the APIâs we are building in the Codeacademy exercises and projects.
Here you can code the PUT and POST request bodies and define what format they should have.
Here is a screenshot of my setup in Postman:
As you can see I created all the requests for the different routes (GET, POST, PUT, DELETE).
How to use Postman to create the âGet all minionsâ request:
You can start by clicking the plus (+) sign in the upper left corner called âCreate new collectionâ. Give it the name âBoss Machineâ.
Then click the three dots (âView more actionsâ) for the newly created collection and select âAdd new requestâ.
Give the request a name: âGet all minionsâ.
Go to the text field called âEnter URL or paste textâ.
Enter âhttp://localhost:4001/api/minionsâ
Click âSaveâ
Click the blue button âSendâ.
Voila !
Below in the section called âBodyâ you see the response from your local Express web server.
Be aware:
You need to start the local web server first using the terminal (node server.js
or npm run start
)
You need to have implemented the â/minionsâ route in your code for the above request to work.
It was a tremendous help for me to use Postman throughout the project.
Here is my entire set-up in Postman for all the routes including sample URL requests and sample content for the bodies in the PUT and POST requests.
To define the bodies in the PUT and POST requests:
- Click Body (below the URL)
- Select raw (send the data as plain text - Postman doesnât touch the string)
- select JSON (the raw data is formatted as JSON)
You can replace all the sample numbers (ids) with something else. Use the âGet allâ requests to see what ids are valid.
Get all minions
GET http://localhost:4001/api/minions
Create new minion
POST http://localhost:4001/api/minions/
Body raw (json)
{
ânameâ: âSanta Purdyâ,
âtitleâ: âInternal Communications Analystâ,
âweaknessesâ: âWill not build open-source open architecture, Unable to execute open-source system engine, Will not build wireless core, too bluetoothâ,
âsalaryâ: 40000
}
Get minion by minionId
GET http://localhost:4001/api/minions/1
Update minion by minionId
PUT http://localhost:4001/api/minions/1
Body raw (json)
{
âidâ: â1â,
ânameâ: âSanta Purdyâ,
âtitleâ: âCustomer Usability Executiveâ,
âweaknessesâ: âUnable to execute vertical ability, Unable to execute open-source methodology, Cannot do synergistic migration, too digitalâ,
âsalaryâ: 40000
}
Delete minion by minionId
DELETE http://localhost:4001/api/minions/1
Get all ideas
GET http://localhost:4001/api/ideas
Create new idea
POST http://localhost:4001/api/ideas/
Body raw (json)
{
ânameâ: âUber but for marketsâ,
âdescriptionâ: âThe name says it all!!!â,
âweeklyRevenueâ: 58393,
ânumWeeksâ: 69
}
Get idea by ideaId
GET http://localhost:4001/api/ideas/10
Update idea by ideaId
PUT http://localhost:4001/api/ideas/1
Body raw (json)
{
âidâ: â1â,
ânameâ: âUber but for marketsâ,
âdescriptionâ: âThe name says it all!!!â,
âweeklyRevenueâ: 58393,
ânumWeeksâ: 69
}
Delete idea by ideaId
DELETE http://localhost:4001/api/ideas/1
Get all meetings
GET http://localhost:4001/api/meetings
Create new meeting
POST http://localhost:4001/api/meetings/
(be aware that no body is required to create a new meeting. The createMeeting function in db.js create the meeting for us with no body content)
Delete all meetings
DELETE http://localhost:4001/api/meetings/
Get all work for minion by minionId
GET http://localhost:4001/api/minions/1/work
Create new work for minion by minionId
POST http://localhost:4001/api/minions/1/work
Body raw (json)
{
âtitleâ: âClose deal #3â,
âdescriptionâ: âClose the biggest deal!â,
âhoursâ: 1,
âminionIdâ: â1â
}
Update work for minion by minionId and workId
PUT http://localhost:4001/api/minions/1/work/1
Body raw (json)
{
âidâ: â1â,
âtitleâ: âClose deal #5â,
âdescriptionâ: âClose the biggest deal!â,
âhoursâ: 8,
âminionIdâ: â1â
}
Delete work by workId
DELETE http://localhost:4001/api/minions/1/work/1
5. Download the project solution code
I choose to download the Boss Machine solution from the beginning. It helped me (a lot). This approach might not be the best for all - but for me it was a necessary help when I got stuck.
Boss Machine Project solution (click âNextâ on the project start page to get here)
https://www.codecademy.com/paths/create-a-back-end-app-with-javascript/tracks/bapi-learn-express/modules/boss-machine-project/informationals/bapi-p4-boss-machine-solution
Cheers