How to set up workspace (VSCode, Firefox / Dev Tools, etc.)?
This is a very basic question about setting up a convenient workspace. I'm a VSCode newbie but started using it instead of Phoenix because it seems a lot more powerful.
Right now, I haven't figured out how to do "Live Preview" and I'm also thinking about starting to look at my work in Firefox because I want to start taking better advantage of Dev Tools.
What I'm doing now is using VSCode, and then using Chrome to open the files as I work in the browser. This seems a little clunky. Is there a way to preview a site using Firefox "within" VSCode?
(Also, I'm using one monitor for this course....)
24 Replies
Search 'live preview' extension on the vs code extensions store
This is the extension I use
It adds this to the bottom right of the window
That one is okay too though it's not being maintained anymore.
That's why I recommended live preview
That I did not know!
I just checked the GitHub repo for live server to see if there had been any activity
Not sure what's going on here but seems worse than last time I checked
My preference is Vite, which is a build tool and not an extension. It goes beyond Live Server by doing hot module reloading. It doesn't reload the whole page. It only reloads the part of the page that was updated. This is both faster and has the ability to retain state.
Would absolutely recommend using vite. You're not locked into using vscode that way. You can use any editor, which also makes it easier for others to look at your page. And once you become more proficient you probably want a build tool like vite anyway. Pretty much every modern web stack uses vite now, so doesn't hurt at all to learn early
Thanks to all of you! I did stumble on Live Preview and I'm pretty happy with that. I'll take the advice about vite and save it for a little bit later - I'm absorbing a lot right now. Really appreciate the help!
I use Live Preview if it something quick and dirty that I want to spin up and Vite if it is a full project even if I don't have other components going into it. From your comment about browsers above, it might help to know that with Vite you can configure which browser you want to open and have it open when you launch the server—Vite doesn't launch a browser by default, just gives you a link. The config is handy if you want to develop in a different browser than your system default. Setting it up is a simple config, but it was a bit of a hassle figuring it out initially. If you're interested, let me know and I can dig out what I did to set it up.
I think Live Preview has a preference that you can set to open a specific browser.
@Tim Rinkel I would love it if you could dig out what you did to set it up! It's a bit of a learning curve to use new tools, but I'm now happily using some of the Emmet shortcuts in VSCode and it's making the whole thing more enjoyable.
@Naomi "Strings" Sorry, I didn't see this until I got to work this morning. I'll track it down and post it over lunch today.
@Naomi "Strings" I think I edited two files to open the browser when the Vite Preview Server runs:
-
vite.config.js (or .ts)
- .env
vite.config.js (or .ts)
.env
For vite.config, this is the significant portion of the file. There may be other stuff added by you or a framework. You need to import defineConfig from Vite. This gives you the functionality for creating the configuration parameters. Then you export an instance of defineConfig with your settings. If, for example, the server property already exists, add the open property to it . . . etc.
defineConfig contains an object with different categories of parameters. In this case you are using the server property, and in that defining open which tells Vite to open the browser when the Preview Server is launched.
Vite will read your .env if it exists. In the example, this launches Chrome. Note that this is on a Mac. Windows may use a different value to get to Chrome. I think I tried several different things before I landed on this one. This step is not necessary. Vite will open your default browser if nothing is defined here. I have a different default browser for normal use so I define my preferred dev browser.
I believe you can also use a full path to the Application. On Windows it would probably be to the .exe file. On Mac, I'm not sure if it's the chrome.app folder, or the actual executable inside.
Here are a few additional resources:
- (Vite general configuration reference)[https://vitejs.dev/config/]
- (Vite reference to open the browser)[https://vite.dev/config/preview-options.html#preview-open]
- (Github conversation)[https://github.com/vitejs/vite/discussions/8467#discussioncomment-5395944] using from command line or as part of a package.json script.GitHub
How to enable
vite CLI command to automatically open localhost in...Apologies in advance if this has been mentioned elsewhere but I couldn't find anything related. When I run the vite CLI command in my terminal, I then have to either click the http://localhost:...
Wow, thank you so much @Tim Rinkel ! I am going to try this out when I have a little more time and courage. A few months ago I was using Brackets to write HTML -- now I'm dragging myself into this millennium bit by bit. 🙂
@Naomi "Strings" Brackets? Wow, I'm impressed by your loyalty!
Let us know how configuring your browser goes.
Let us know how configuring your browser goes.
Ha ha @Tim Rinkel ! I've been developing websites since 1995 when I just hand-coded the HTML. But after 15 years as a marketing manager, I've gotten severely rusty -- coming mostly from a graphic design background, coding has always been a struggle for me. When Dreamweaver started adding all sorts of crazy features - tbh it was acting more like a bad Wordpress theme - I switched to Brackets. Now I'm basically putting myself through remedial school so I can get my web dev skills back up to par with where they should be - because of all the things I enjoy about marketing, developing websites is my favorite! That's why I was 'loyal' to Brackets - it's more like laziness. sorry, you probably didn't need my life story. :). What kind of web development do you do mostly?
if you use vscode, i have a list of extensions for you
well, the rules don't allow sending pdf files for good reasons, so, here's a markdown file with extensions and explanations
@Naomi "Strings": My background is similar to yours. Started hand writing HTML in the early to mid nineties. At the time I was working as a systems engineer selling graphics servers and production equipment to printing and design companies. I remember one meeting early on with a Silicon Graphics engineer who was real excited showing this really new thing: a marquee scrolling across the bottom of a web page. Before that, and now for the last 28 years, I'm have been a graphics geek for printing companies. My first real coding was hand coding PostScript to make bar codes when your only other real option was paying $30 a pop for some specialized company to send you film.
Most of my web work at this point has been pro-bono for several youth sports organizations (the printing company I work for doesn't really want to get into online media). So I have all this pent up knowledge waiting for an outlet. I'm hoping to do more with it when I retire next year.
@Tim Rinkel amazing story! I think there's a strong possibility you can do more with it when you retire. I think there is a niche with small businesses that have either never got their websites up and running, or businesses that got oversold tech they didn't need, or are stuck in some kind of bewildering netherland. Out of the local businesses I know, one has a website that was probably designed in 1998, another one is overpaying for some kind of Marketing 360 style BS, and a third can't figure out how to access their website to change the prices and is having trouble integrating it onto their POS system. I think there are tons of businesses that are kind of "left behind" this way and I think it's a rich client base for someone who doesn't need to make a million bucks a year....
That's what I'm hoping for. I'm just afraid by the time I get there everyone will be doing Wix or some AI thing figuring it looks good enough.