Edit: Perhaps the better title would be: Struggling with setting up a local dev environment
I have done all the FCC projects with repl.it so far. The issue is that I would want to switch over to VSCode and work on/improve the projects there.
I want to see what is actually going on, so I installed the live browser extension. The issue is this: I can see the html page as it should be, but whenever I test the functionality of the project, e.g. Submit a new thread to the messageboard, it either gives me a 405 http error or it says something like āCannot GET /api/ā¦ā.
Assume that I am pretty much a noob when it comes to working with VSCode. To illustrate that point, hereās a quick example of a mistake I made in the process of trying to make the live server work:
I didnāt know, that I have to select the html file before I click on āgo liveā to actually see my page.
Also, if I understand correctly, I have to install node.js locally, which is another thing I didnāt know.
So any help/suggestion/tutorial link will be greatly appreciated!!
A better way to understand āusing VSCode to build stuffā is to realize VSCode is just a fancy text-editor. Yes you can use extensions like live-server to have VSCode handle more things, but it turns more into āmagical VSCode voodooā than actually digging into how things are working.
So this means if you want to build/run your projects youāve built on repl.it you need to setup your dev environment on your machine. There are multiple ways to do this, which mainly depend on what you want to achieve. Assuming you want to do full stack web development you will need to do a few things. You also might need to debug why some things are working ādifferentlyā as repl.it usually does some āfancy magicā to make things work, which is what we kinda want to get rid of.
So for a full-stack app you usually have the following:
Setup how you are going to ārunā your dev servers (front-end/back-end). Usually these are ran from the terminal IE npm run start or the like. For windows you can use powershell or cmd, or even git-bash if you have it.
Setup node.js so you can install/run your dev-servers and get packages.
run everything and test to see if your local environment works with how you set everything up locally (IE everything is connected)
Each step could be the issue, and understanding each step is required to getting a full-stack app running usually. This list doesnāt include building or deploying the app either.
So yes you can look into live server, but live-server is just part of 2. Thereās still the other parts of the setup, and all the details that come with it. This also assumes you moved everything off repl.it correctly and makes a ton of assumptions that everything else is going correctly.
So main thing is that it isnāt VSCodeās job to handle anything and everything, rather its just 1 tool in a bunch of things that you need to have a full dev environment. Such environments can get confusing since your dealing with your computer, however getting it working essentially has you working in a āprofessional environmentā. With professional tools, doing āprofessional thingsā, so its totally worth the experience!
Man, thanks for the detailed answer, it really gave a lot of clarity.
So I am using a mac and the goal is indeed full stack development.
Now the issue is this: I donāt really know what to do. I feel like thanks to your explanation I now have a more accurate idea of the road ahead, but I donāt know which steps to make.
So while I feel your steps make sense, I have pretty much 0 clue on how to actually do them, probably because explaining them in detail is way to specific, so could you recommend any nice guide/tutorial on this?
When I was working through the d3 challenges on FCC, I was in a similar situation, where I had 0 clue on how to make a choropleth map and even though I was looking at guides, I still didnāt understand what to actually do step by step, which lead to me stopping coding for a couple of months.
Thankfully I have enough things to do on the side right now, so that I donāt actually stop coding, but I would want to get through this phase as efficiently as possible, so that I donāt get discouraged again
Most tutorials out there go further than what you actually need. You already have most of the stuff āin the stackā, but if you have issues you need to seek out help for the specific issues you run into.
So a quick check-list:
Install VSCode
Install nodejs
Pick and use nodejs in the CLI of your choice
Install packages for the project using npm - If you donāt know what packages you even need, then ask specifically what you want to do. You mentioned live-server, there is a live-server package that you can use from the CLI rather than use the extension for vscode. If your using react, youād probably want to setup stuff using create-react-app.
If you donāt know what or how to use any of the above things. Google em! Getting help for a specific things is usually easier than getting help on a large generic problem.
Finally, as you mentioned earlier, your getting problems with your dev environment. This is normal as things can easily get misconfigured and start acting up, you have to debug it and try to isolate and understand the problem. Googleās a big help here, as-well. As before getting help with a single generic issue, IE āIām getting errors with my app, I need helpā is harder than getting help for a specific problem, IE āIām getting 405 errors when my React app is calling my back-end API, hereās a github repo with the code for the front-end and back-end code at X-Y-Zā.
Your welcome to follow along a tutorial or guide on how to set stuff up, (google ;D) however just beware to not blinding copy and follow the guide. It might include a bunch of fluff you donāt want or need, or actually end up being wrong and you end up with a problem āand feeling lostā again. You can easily end up in ātutorial hellā if your not careful, which is usually why I say go out on your own earlier and find specific answers to specific problems, and āgoogle all the thingsā rather than try to follow some guide/tutorial to the T.
So hereās a tutorial that goes super in depth in, into things you probably donāt even care about either:
Hereās another guide that goes into what current web development looks like in general:
Thank you so much for your help! You really gave me a lot of clarity! The problem was, that I had a really tough time even asking the right/specific questions. I often say, that the only way to have motivation is, if you see potential and I just couldnāt see any light at the end of the tunnel (apart from knowing, that many people have successfully done it).
So thank you again so much for clearing things up a bit!
Funnily enough I am actually facing this error:
āIām getting 405 errors when my React app is calling my back-end API, hereās a github repo with the code for the front-end and back-end code at X-Y-Zā .
but I guess I will try and figure this out on my own now :).
Yea I saw you brought it up earlier, however with the amount of information you have (405 error using VSCode+live-server) isnāt really enough to help debug the problem, as it could essentially be anything and everything in your stack. From the back-end not being available, how/where your calling your back-end, if your URLās are just plain wrong and calling random stuff on the wrong ports, to your computerās firewall, to almost anything.
Good luck debugging the problem, if you get more info on whats going on then you can always ask about it in another post on the forums
Oh thank God. I was able to set it all up, and at least for now everything seems to work. I think the biggest problem probably had to do with properly using npm, but finally I can get to work!! Thank you so much, your advice but also the way in which you expressed the information really helped me a lot!
