Struggling with transferring repl.it projects to VSCode

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:

  1. 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.
  2. Setup node.js so you can install/run your dev-servers and get packages.
  3. 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!

Good luck!

2 Likes

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 :smiley:

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:

  1. Install VSCode
  2. Install nodejs
  3. Pick and use nodejs in the CLI of your choice
  4. 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:

Good luck!

1 Like

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 :).

Thanks again!

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 :slight_smile:

1 Like

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!

1 Like