Website development on local machine

Hi there,

I have been working on the intermediate/advanced front end project and would like to move from working in Code Pen to working on my local machine.

I have looked through several google searches, reddit, and this forum and am struggling to find answers to my questions so I decided to make a new topic. I apologize if this discussion already exists on this forum.

So to begin, what is the typical setup for a developer on their local machine?

I have seen tutorials using Vagrant and Virtual box. Is this a typical work flow for an actual developer?

So Vagrant would act as a web server for your HTML,CSS, and Javascript files and you would simply access the directory from the browser of your choice?

So you update the config file to map a given ip address to your local machine and simply visit that address in Chrome?

Any help an insight is greatly appreciated.

  • Download any editor you want:
  • Find something for automatically reloading your browser: either browser plugin or something like lite-server. (If you don’t want to refresh everything manually)

  • Start coding!

That should do it for frontend development. If you want more:

There is lots of threads here relating to your question. Here is one just a day or two old.

Generally speaking what you are looking for is an IDE, an integrated development environment. They come in lots of flavors, and are somewhat dependent on your OS, some run on Windows, some on OSX, others Linux, and some run on all three.

IDE’s generally have built in servers, and display your code to a browser on your local machine as you work.

Here is another good thread to go through that has a lot of information in it. Link

So you would install lite-server and then in the browser you would visit http://localhost ?

Would Vagrant and VirtualBox be considered overkill?

Can Sublime itself be used as and IDE?

lite-server will need node. So if you have Node and lite-server installed, you can just run > lite-server in your directory. If you have just started with programming it might be easier to use a browser plugin that automatically refreshes a page when a file in a directory is changed. I use(d) Auto Reload for firefox, but I suppose there are plugins for most browsers.

Another option (which also needs Node) is Gulp. It isn’t necessarly easier than lite-server, but can do more things (which you probably don’t need).

No experience with Vagrant and VirtualBox

Sublime is a text editor, so it depends what you expect an IDE to do.

Thank you for your help. It is much appreciated.

I am not exactly new to programming but definitely new to website development and its associated workflow.

So I have another question.

I have my files from a codepen project in a Github repository.

To view these files on my local machine I would:

  1. Clone repository to directory on my computer.
  2. Use Node and lite-server to serve the .js, .css, and .html files to my web browser.
  3. “run > lite-server” command in terminal and that will launch Google Chrome which will then render website

Is that correct?

Sorry if that was convoluted.

Yes, you clone the repo, use npm init to create a package.json file (if it hasn’t one already), install lite-server (npm install lite-server -g) and run lite-server in the terminal (in the correct directory).

Or just follow this:

1 Like

Awesome.

So is it fair to say that lite-server is providing the same functionality as Vagrant when it spawns a virtual machine that then hosts the website?

Yes. Virtualization/containerization is ideal for teams who want to scale their development environment. That is, regardless of which operating system, IDE, or text editor they’re using, their dependencies are all taken care of and can easily be duplicated. This is also great for writing server side code, which is probably going to be run on a virtual server or container.

Ask 10 web developers what their preferred workflow is and you’ll get 100 answers. This is a huge, complicated topic, and what you should use will depend heavily on what you need to do. Most of what you do in CodePen can be done using just a simple text editor on the desktop, and nothing more. As soon as you need to do some pre-compiling (Sass, Babel, JSX), your tooling needs will grow sharply. Let us know what project you’re working on and what technologies you’re using to get the best help available.

Thank you for your response.

I didn’t realize my question was “opening a can of worms” as it were.

OK. This is what I am not “gronking”. So I use the text editor of my choice to edit my *.js, *.css, and *.html files in my local directory. How do I get a web browser to render the website?

I have tried simply opening the html file. Maybe I am not including the .css and .js files correctly in the html file and Code pen is doing this all for me. Code pen is allowing me to gloss over these necessary includes.

Yes, CodePen does include files for you, so just copying and pasting the HTML wouldn’t work. There are other HTML declarations that need to happen for a browser to render a page that CodePen takes care of. If you can post the files you’re trying to work with, I can make the needed edits, and that should be enough to show you how to do it in the future.

Thank you for the offer.

However, I think it may be educational for me to figure out the includes myself.

So if this website is dynamic such as the Wikipedia viewer here:

If the javascript file is included correctly in the HTML file Chrome will render the website and it will behave exactly as it functions in Code Pen?

You need a few things.

  1. jQuery
  2. Boostrap
  3. Your CSS file
  4. Your JavaScript file

They need to load in more-or-less this order. You already have the <html> and <head> tags that are needed for running the page locally (CodePen only requires the stuff you have inside of the <body> tags, by the way, and the rest is ignored), you just need to add your file includes in the right spots, add a doctype declaration, and it should work.

1 Like

I’m a bit confused about the difference between Github and Surge. I’ve followed your advice and started using Github (though I don’t push my files from the terminal yet, I simply upload my files on Github - if that makes sense).

Am I right in saying that : Github: cool for repos - pull requests and so collaboration and feedback on code.

Surge : only have your website show up (wrong term), but also a lot simpler?

As long as you are working on front-end projects, you don’t need a server at all. You can double-click on the HTML file in your file browser and it will open in your Internet browser. A server is required for back-end development only.

In theory, you can put the CSS and JS directly inside the HTML file, but most people recommend against that. If you have your CSS and script in external files, you must import them in the head section of the HTML. Assuming you are writing in English, using the UTF-8 encoding and you named the script file “script.js” and the stylesheet “styles.css”, a skeleton HML file would look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

<body>
    <p>Content goes here.</p>
</body>
</html>

Just open this with your browser and you are good to go.

CodePen inserts the head section automatically when the page is served to the user, that’s why you didn’t see this before.

EDIT: If you are using Bootstrap and/or jQuery, you’ll need to add them, too.

EDIT [ deleted my next question]

Thanks a lot @P1xt I guess it’s the next step for me. I had been using (present perfect continuous a bit overused for a couple of days) Github pages but I can imagine it’s not the same - especially when it comes to doing back-end? (ha I should delete that too, I have no idea what I’m talking about).

Anyway, thanks again for the hundredth link and thousandth piece of advice I get from you !

http://brackets.io/

I have started using Brackets editor recently and I absolutely love it for editing html and css and javascript for webpages. I think it might suit you too. It has a built in LivePreview feature that will open your current code in the browser for you, and it updates LIVE - this is much much simpler than attempting to build your own server. If and when you need to do that I would recommend node.js and express, but I agree that that is a whole other thing.

Try it! I’d be surprised if you didn’t appreciate it. Only (small) catch: LivePreview only works on Chrome. I use Firefox, but it was worth installing chrome just for live previewing!

Yeah, things will work slightly differently if you actually need a backend. (Heroku seems to be a popular choice and will be what I’ll be using when I free time actually exists for me again, but nothing wrong with Surge either!)

If you’re doing solely frontend, you can totally just use GitHub Project Pages to deploy your work, and it’s pretty simple if your repo is already on GitHub, especially now that they’ve enabled the ability to use your master branch. Go into your repo, click on “Settings” at the top, scroll down to “GitHub Pages.” Then you can select whatever branch you want to use under the “Source” heading (if you haven’t touched any extra branches, your branch will just be master), hit “Save,” and it should be deployed within a few minutes (it’s usually much faster) to https://YOURGITHUBUSERNAME.github.io/YOUR-REPO-NAME.

@bethqiang @P1xt all right then, looks like I wasn’t so far off ! Surge or Heroku for the day I start doing back-end. Until then, Github is fine too.

I already use Brackets (was using Notepad ++ then I switched, I can’t remember why), but haven’t clicked yet - I get easily attached and so Notepad still has a place in my heart, and so do my rotten car and my dead cat.

Yes I’ve seen Heroku referenced elsewhere but my chronic “oh there’s something weird and my brain doesn’t want to go there” happened, whereas the road seems clear for Surge! So if Heroku, Heroku later.

I’ve already put a repo on Github - now I have to start using that fancy Git console that came with the Github Desktop!

THANK YOU !!

(Does anyone have problems having a shower since learning this whole thing? I find myself busier checking - learning - watching - taking notes - writing stuff and trying to solve things than using my Strawberry Smoothie Body Scrub. No, don’t answer that. )