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 you update the config file to map a given ip address to your local machine and simply visit that address in Chrome?
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
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.
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).
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.
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.
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.
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:
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 !
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. )