Web Connection
Visual Studio Code doesn't handle tilde correctly in layout files
Gravatar is a globally recognized avatar based on your email address. Visual Studio Code doesn't handle tilde correctly in layout files
  Tore Bleken
  All
  Oct 14, 2020 @ 10:41am

In my layout file, I have this line:

<script src="~/scripts/myscript.js"></script>  

This works as expected in WWC, but I can't use VSC's shortcut, Alt+Click to open the script file. Is there any workaround for this?

Gravatar is a globally recognized avatar based on your email address. re: Visual Studio Code doesn't handle tilde correctly in layout files
  Rick Strahl
  Tore Bleken
  Oct 14, 2020 @ 12:15pm

Unfortunately not because the editor has no idea where ~ is pointing to. I thought this might work in HTML (C#) mode - which understands that ~ is the root folder - but tried it and even then it doesn't work.

Small price to pay for consistent site pathing.

What you can do however is this: If you always use root paths including during development using IIS Express, the Web Connection Web Server, or IIS with a root domain, you can replace all the references to ~/ with / which will give you a valid URL. Just be aware if you later switch to use the site in a virtual directory (ie. /wconnect/someurl.wc) this will break. That's why WWWC uses the ~/ by default.

Easy to do in VS Code: Do a search and replace in Files for ="~/ and replace with ="/.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Visual Studio Code doesn't handle tilde correctly in layout files
  Tore Bleken
  Rick Strahl
  Oct 14, 2020 @ 12:20pm

Thank you for the clarification. I was considering some sort of IF-Else-Endif construct, but gave up on the idea. No big deal, really.

Update: I jumped into this problem because I had (and still have) some problems with relative paths during my recent tests. I created a new project, and set the root to C:\webconnectionprojects\VfpHelp\web and the scriptmap is vh. In this folder I have a file maintest.vh with the line

<% Layout="/views/maintest_layout.vh" %>

In the file C:\webconnectionprojects\VfpHelp\web\views\maintest_layout.vh I have these lines:

	<!-- <link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
	<!-- <link href="/lib/fontawesome/css/all.min.css" rel="stylesheet" /> -->
	<!-- <link href="/css/application.css" rel="stylesheet" /> -->
	
	<link href="/web/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
	<link href="/web/lib/fontawesome/css/all.min.css" rel="stylesheet" />
	<link href="/web/css/application.css" rel="stylesheet" />

This works on http://localhost/VfpHelp/maintest.vh. However, when I use the first group of stylesheets with relative paths, it doesn't work. I also tried to uncomment the first group, so that both were included, but that also failed.

This puzzles me, and was the reason why I needed to change into fixed path. I'm also not sure that this solution will work once I publish it.

BTW, I use Chrome.

And finally, I don't rule out the possibility that I may have a caching issue...

Gravatar is a globally recognized avatar based on your email address. re: Visual Studio Code doesn't handle tilde correctly in layout files
  Rick Strahl
  Tore Bleken
  Oct 14, 2020 @ 01:17pm

I suspect you have your site mapped to the wrong folder. Make sure the site is mapped to the the /web folder and not to the project root! If the mappings are correct something like https://localhost:5001/web/default.htm should not work. If those script URLs resolve there's something wrong with the site mapping.

As to Visual Studio Code: There's another gotcha with this: If you use Web Connection's server's Edit button default behavior, the project 'root' folder where VS Code is opened won't be the Web folder but the project root folder. I believe VS Code assumes the 'root' folder for Web pages to be the root of folder open in the editor and so it probably won't be able to resolve /lib/blahblah because that's actually not available from the root project. For any server path resolution to work VS Code has to run out of the Web folder as the root folder, rather than the Web Connection project root.

FWIW you can override the VS Code launch string in the config file. In YourApp.ini you can change the editor startup to:

CodeEditorCommandLine=code ..\web

which will open Code in the \web folder instead. You won't be able to edit FoxPro project code files and other files, but you get correct root pathing for the Web project and access to all the Web files, which is the main reason to use VS Code in the first place.

To me - having the editor code navigation not work is not a big deal, especially since you can use the VS Code search functions (just type into the directory) to find files very quickly. I prefer having all project files - Web and FoxPro project files - in a single editor environment where I can edit everything in one place so I much prefer having VS Code open the entire project in the project root.

The Web Root folder configuration might also be configurable in some way by specifying a configuration option, but I'm not sure offhand where that might be set in VS Code. Presumably in the .vs file user settings.`

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Visual Studio Code doesn't handle tilde correctly in layout files
  Rick Strahl
  Tore Bleken
  Oct 14, 2020 @ 02:30pm

One more update:

Looks like VS Code is smart enough to detect the /web folder even if you have the project open. I suspect if there's a .vs folder in the Web Root (from a previously opened folder perhaps) it'll detect that and treat that folder as the Web root so this then works in your _layout.wcs or whatever page:

<link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

and lets you open the file.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Visual Studio Code doesn't handle tilde correctly in layout files
  Tore Bleken
  Rick Strahl
  Oct 15, 2020 @ 02:39am

First of all, the VSC thing is not important.

However, I have run out of ideas regarding the problem with "~/lib" while "/web/lib" works. I don't see any setting with the wrong value. Any particular setting I should check?

FYI, http://localhost:5001/web/default.htm does NOT work. The same goes for http://localhost:5001/default.htm. I tried both http: and https:. http://localhost/vfphelp/default.htm does work.

I guess 5001 in this case is the port number, do I need to change it?

Sorry if my question is basic. I typically only work with WWWC occasionally and it's been a while now. However, I plan to be pretty busy with it for a long period from now on.

Gravatar is a globally recognized avatar based on your email address. re: Visual Studio Code doesn't handle tilde correctly in layout files
  Rick Strahl
  Tore Bleken
  Oct 15, 2020 @ 03:45am

I'm not sure - seems like you have several different things going on that don't appear correct. I can't tell you why /web works and ~/ does not but most likely your site mapping is not pointing at the right folder. Make sure if you're using a new project that your Web root (or virtual) points at the /web folder, so that the base URL finds files in that folder. ie. if default.htm exists it should be in https://localhost:5001/ (WWWC Web Server) or something like http://localhost/vfphelp if you're using IIS with a virtual directory.

If you're using an older app then the paths may be different...

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Visual Studio Code doesn't handle tilde correctly in layout files
  Tore Bleken
  Rick Strahl
  Oct 15, 2020 @ 04:03am

Update:

Don't ask... Now it seems to work, I really have no idea what was the culprit. I think it was some kind of magic!

© 1996-2024