In this exercise you will set up the local development environment required for the next exercises.
You will learn to:
- Install the required software
- Set up and run the local development environment
- ✏️ Start by cloning this repository into a folder on your computer. If you've never used git before, you can alternatively use the the green "Code" button to the top right of the repo front page, and then select "Download zip". Unzip the downloaded zip file (make sure to remember where you put it).
- 📖 Although you have this
README.mdfile on your computer, it's easier to read it on GitHub with formatting. We therefore recommend you keep a web browser tab open with the exercise tasks.
📖 Node.js is the platform/runtime that's going to run our web server and backend code. You can test if you already have Node.js installed by opening a terminal and entering node -v which should return a version number if it's installed.
✏️ If you don't have Node.js installed, you can download the latest LTS (long-term support) release from nodejs.org.
❗ Note: If you have Node installed with a version less than the latest LTS version, please upgrade to the latest LTS version before continuing.
✏️ Install Google Chrome if you don't have it
✏️ Install VS Code if you don't have it
📖 In order to kickstart the exercises we have created a starter project for you.
✏️ Open a terminal and change directories to the src folder.
✏️ Install all npm dependencies by running the command npm install:
npm install✏️ After npm install finishes, run the command npm start to start the web app:
npm start✏️ Open http://localhost:3000 in Chrome
📖 You should now see the text "Message from API: 'Hello Nerdschool 🎉🎉🎉'" displayed on the screen.
📖 Tip: If you want stop the application, press CTRL+C while inside the terminal window you started the application in. Run the command npm start to start the app again.
✏️ Open VS Code and open the src folder inside the repo folder. See Open a folder in VS Code if you are new to VS Code.
📖 The src folder in this repository contains the starter project where we will be doing all our programming in the next exercises:
src
├── app.js
├── backend
├── frontend
├── package-lock.json
└── package.json📖 This is the main entry point for the web app. It is responsible for starting up a web server using the Express web app framework.
📖 This folder contains backend-related code that runs on the web server via Express and Node.js.
📖 This folder contains frontend-related code that runs in the browser.
📖 package.json is the project mainfest file where all npm package dependencies are declared (for instance Express). package-lock.json is automatically generated by npm itself, no need to edit this.
📖 If you get an error in the frontend JavaScript code, it will not display in the web page itself, JavaScript runtime errors are displayed in the dev tools console in the browser. For more info on Chrome Dev Tools, see:
- How to open Chrome Dev Tools: Open Chrome Dev Tools
- How the console works: Console overview
- Inspect network activity is very useful as well
📖 Errors in the backend JavaScript code will display in the terminal window where you started the web app. Debugging tools for Node.js is out of scope for this workshop. Unhandled errors will crash the app, resulting in the following message in the terminal:
[nodemon] app crashed - waiting for file changes before starting...
📖 To restart the backend app after a crash, change a backend file and save it. The app will automatically restart itself. Make sure to reload the page after restarting the app.
📖 Note that if the backend crashes, the web server will not respond anymore, leading to Chrome saying "This site can’t be reached".
📖 See troubleshooting.md for an overview of the most common JavaScript errors.
Now that we're all set-up, let's add some features to our web!