This repo contains a client directory and a server directory. While it is all in one repo, they must be run separately and you should consider them to be 2 separate applications.
Open 2 terminal windows.
-
In one terminal window open the client directory and do the following:
- run live-server. This is serving your client files. If you open your index.html from Finder (e.g. you are seeing
file:///
in the URL bar) you will run into CORS issues. Use live-server. - Your client will run, but it does not communicate with the server yet. You need to write the appropriate code.
- run live-server. This is serving your client files. If you open your index.html from Finder (e.g. you are seeing
-
In the other terminal window open the server directory and do the following:
npm install
npm start
ornodemon
- Your server will run, but it will not respond to requests correctly until you write the appropriate code.
Important Note: After each step, commit and push your current progress. You'll notice in the later steps (Step 2 and onward), you are told to check out new branches. For pushing the work done on those branches, rather than git push origin master
, you'll need to run git push origin branchName
.
- Finish out the routing for the existing server to handle incoming client requests
The client will communicate with your server via jQuery's AJAX. For your convenience the jQuery script is in the index.html file already.
Your server will listen for and respond to client requests. You are building an API similar to ones that you have used in the past. For this step you will be using Node's http module (no Express allowed).
- What is the difference between the client and the server?
- What is the request/response cycle?
- What is CORS and how do you prevent CORS errors?
- What are http verbs? When are they used?
- What are http status codes and how do you respond with them?
- What is an endpoint and where do you see it?
- What tools can you use to test your server?
- Where do you see your server console.logs?
- What parts of your code are asynchronous and how will you handle that?
- Check out a new branch
express-server
- Refactor your existing server from http to Express.js
Note: Use the Express documentation as your primary resource for this.
- Check out a new branch
react-client
- In the
react-client
directory, build out a refactored version of the original frontend in React - Serve up your React client from your Express server using
express.static
- (Optional) Refactor your jQuery's AJAX client requests to use Axios
The dependencies for React have been set up in the react-client
directory. To begin transpiling the code, run npm run build
in your client terminal.
Note: Use the React documentation as your primary resource for this.
- Check out a new branch
add-mysql
- Design a
schema.sql
for storing the existing application data - Add data persistence to the information being stored in your backend (refactor the Express server as needed)
Note: use the MySQL and mysqljs documentation as your primary resources for this.
- Check out a final branch
full-crud
- Expand the functionality of your React frontend until it sends at least one request of each CRUD category
- Build out server routing to handle those requests
- Refactor your persistence layer as-needed to support these new routes