Day 3 - A website on my computer
With great power comes great responsibility
Getting the code
Currently the code lives in a repository on GitHub, but really I want to edit it on my own computer. To do this, I need to "clone" the repository to my local computer. This is how git works and many developers use commands to manage all this on the terminal. But I think it is much easier to use GitHub’s desktop application which takes care of managing the repository as well as logging you in for permissions.
Once you have installed GitHub Desktop and logged into it, you will get the option to clone a repository. Either one from your account, or you can chose "clone from URL" to clone mine from https://github.com/ppywmjr/mike-james-rust-personal-site.git. Choose a location to save it, the default is probably fine, and click clone.
Installing VSCode
The code is now on your computer, but you need some way to see it, edit it and run it. Download and install VSCode. Then choose open folder and select the folder in which you cloned the repository. You now have an IDE where you will do virtually all of your development.
Node.js
The javascript code needs something to execute it. On a website it is run by the browser, such as Chrome. On the server the most common approach is to use Node.js. You could install Node directly onto your computer but I have found that this approach will eventually end up causing pains. It is much better to install a version manager and use that to install Node. For Windows, I’m using nvm-windows, which stands for Node Version Manager Windows. Download the latest nvm-setup.zip file from NVM’s GitHub releases page. Then unzip and follow the install instructions.
At time of writing, some nvm commands on windows require administrator privileges so to install Node open the Windows PowerShell terminal as an administrator by typing PowerShell in the Windows search bar and selecting "Run as administrator".
In the PowerShell terminal type nvm ls and press enter. This runs nvm’s list command to list all the versions of Node.js that nvm has installed, which should currently be none. So now install Node 18 by typing nvm install 18. This will install the latest stable version of Node 18. Now if you type nvm ls again it should show you what version of Node 18 it has installed. For me it is 18.18.0 To use this type nvm use followed by the full version, eg. nvm use 18.18.0
In most circumstances it is safer to not use admin privileges in the terminal, so now that node is set up, it’s best to move over to VSCode’s built in terminal. And open a terminal by selecting the VSCode’s Terminal menu and clicking "New Terminal". This will open a PowerShell terminal at the bottom of VSCode without administrator privileges. Type node -v to confirm the version of Node that is running.
Installing Node packages
So close now. The only other thing we need are the Node packages. A core part of Node is that it uses packages, which are small (and sometimes not so small) bundles of code that are designed to do specialised jobs. In VSCode Explorer, if you open the package.json file you will see a list of "dependencies" that are the packages that are needed to run this application. Each of which will also depend on other packages. The whole long list of all packages needed can be seen in the package-lock.json file. If you open that, you’ll see it’s over 3000 lines long, so there’s a lot of code that we need to get in order to run the app. Fortunately Node comes with a package manager called npm, or Node Package Manager, inventive name I know. In the terminal type npm ci and watch npm install all of the packages that are needed. You should see in the VSCode explorer that a new folder has been generated called node_modules.
Running the app
Ok, we are ready to actually run the app. Run one final command in the terminal npm run dev and the server will start in developer mode.
In Chrome, or which ever browser you like best, go to url localhost:3000 and you should see the app running on your computer.
Wrapping up
The app is running! Honestly, this is a massive hurdle, so many people don’t make it this far, and who can blame them, it’s a lot of work for not much excitement. Maybe it’s time to shut down the server. There’s a couple of ways to do this, firstly you can click the little bin icon on the VSCode terminal, or, if you want to keep the terminal open you can press "ctrl + c" to end the process, then confirm by typing "y". That is all the set up done, next we can write our own code.