How to Set Up Local Web Development Environment?

1

Good day everyone :wave: :smile:

How does one do web development locally, as opposed doing it directly on the website, a CodePen, or some other online editor that immediately reflects changes?

I have a bit of experience with web dev, mostly notably having completed the first two fCC certifications (HTML/CSS and JS) and having made a multi-page WordPress website (involving a lot of custom code), but all the coding I’ve done was done either directly on the website (i.e. editing the files in the file manager of the hosting provider, and sometimes in the WordPress interface), or on CodePen / the fCC editor.

How does you recreate the ability to see your website update visually as you update the code while programming in, for example, VSCode? More broadly, in what sort of environment do professional web developers tend to work? I would imagine the answer to both of these questions involves working locally using one’s preferred IDE and runtime environment (e.g. NodeJS), but I really have no clue. I understand these might be very broad questions, but I would appreciate if someone could at least push me in the right direction.

Thank you!

2

My setup is with VSCode as IDE/editor. For a new react project I open the command line where I want to start a project and and type the incantation npm create vite@latest in the command line. You will need to go to node website and install node before this. freeCodeCamp has articles on setting this up and you can also read the docs from node, react, vite, and etc.
TLDR:

  1. install node
  2. open terminal in the file location you want to build a project
  3. npm create vite@lastest
  4. answer the prompts
  5. cd <project-name>
  6. npm install
  7. npm run dev
  8. type into browser localhost:<number listed in command line>
  9. also Read The Manual (RTM) it will save you time so much time
3

Thank you for the detailed answer, Tracy; much appreciated!

1 Like