website/webdevelopment/gsfullstack/mark-Windows11.js

import { addBanner, addArticle, addHeader, addParagraph, addSubHeader } from '/scripts/article.js';
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js';
import { addImageWithCaption, addButtonGroup } from '/scripts/visuals.js';
import { menu } from '/scripts/web_dev_buttons.js';

const main = document.querySelector("main");
main.append(addBanner("<a href='https://www.linkedin.com/learning/getting-started-as-a-full-stack-web-developer?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c'>Getting Started as a Full Stack Web Developer</a>", "Tom Geller", "Make Your Mark Immediately"))
main.append(addArticle())
const article = document.querySelector("article")
article.append(addHeader("Create and Change Pages with a Code Editor"))
article.append(addParagraph("To a large degree, this course covers topics which are not really relevant to me, although they are important in the context of learning web development.  It does a good job as a cntinuance of the other courses in the 'Become a Web Developer' Learning Path.  For many people, learning about HTML, CSS and JavaScript can be done without any hosting - the JavaScript course is a good example since it uses the live server in Visual Code to view the pages you create in the course."))
article.append(addParagraph("As such, you might find yourself learning these topics without really knowing how a website is hosted and this course is showing you how to do exactly that."))
article.append(addParagraph("Since I have already used a web hosting service and I am currently hosting my own website on a Raspberry Pi, I don't need to cover these.  However, I will still view the course, partly in order to get the certificate (!!) and partly because I'm not an expert in these subjects so I may learn something."))
article.append(addParagraph("However, this means that the notes here are not covering the entire course, but just the parts of it that I find interesting and/or useful."))
article.append(addParagraph("The first topic that falls into this category is developing on a remote host using MS Visual Studio Code.  Editing files on a remote host is not difficult - I actually do that quite often if I need to make small changes to a file on my web server.  Still, there are some advantges to connecting to the host via ssh in VS Code and I wasn't aware that you could do that, so I will cover it here."))
article.append(addParagraph("To start with, I will assume you have installed VS Code so open it up and click on Extensions and search for ssh.  The latest version of Microsoft's Remote - SSH plugin should be at the top so go ahead and click install.  You may also need to install Remote Development so if you have any problems connecting, you might try installing that.  You should then see a green icon appear in the bottom left corner and this is shown in figure 1."))
article.append(addImageWithCaption("./images/ssh_icon.png", "Figure 1 - the SSH icon in Visual Studio."))
article.append(addParagraph("Click the icon and select Connect to Host and then Add New Host and type in the command as you would in something like Kitty to connect to a remote host via ssh - note that you should include the username so this will look something like"))
article.append(addInset("philip@192.168.0.10"))
article.append(addParagraph("Next, select the config file where you want to store this login.  This will add an entry that looks something like"))
article.append(addInset("Host 192.168.0.20"))
article.append(addInset("  HostName 192.168.0.20"))
article.append(addInset("  User philip"))
article.append(addParagraph("You can then select the icon again, select Connect to Host and then slect the host that you want to connect to.  You will probably be asked to enter a password and you should then be connected."))
article.append(addParagraph("To show that this does work and to demonstrate how I can edit a file remotely, I have created a directory on the remote server called porojects with a subdirectory called gs."))
article.append(addParagraph("Using WinSCP, I have copied the course Exercise Files into the gs directory.  The image in figure 2 shows a directory listing of this folder which comes from a connection to the server via ssh on Kitty."))
article.append(addImageWithCaption("images/gs_contents.png", "Figure 2 - the contents of the gs folder."))
article.append(addParagraph("In figure 3, we can see the same directory, but this time we are viewing it from within VS Code."))
article.append(addImageWithCaption("images/gs_contents_in_vscode.png", "Figure 3 - the contents of the gs folder."))
article.append(addParagraph("Note that in figure 3, I have selected Open file and I can either select a file from the remote server or I can click on Show Local to open a file from the local machine."))
article.append(addParagraph("One point that may be of interest, I opened the php file in the folder for video 01_03 and there was an issue which looked like it was being caused because PHP wasn't installed.  I looked for a plugin and found PHP Extension Pack and there was an option to install this on the remote host.  I tried that and it didn't work so I just installed it directly on the server.  This would be a more interesting point if I had been able to install PHP from VS Code onto the remote host but it is at least worth noting that there is an option to do that."))
main.append(menu("fullstack"))