WebStorm generates a 404 error on an empty HTML5 file
So I have just downloaded WebStorm for my PC, and it generated a 404 on an otherwise working website. I tried running it on Sublime Text 3 and it worked, so the website it itself is fine. I then thought that something is wrong with the website itself, so I created a new file, named index.html using Sublime Text 3 but it still printed out the 404 error and when tried to run it using google chrome, bypassing webstorm, it showed me an empty file which was expected. I will say that I am using Windows XP. Why is it doing that? Also, where are the docs on this IDE?
Edit: Sorry, cannot post the image due to the size being too large (the image is 3MB vs the allowed 2MB). I think that Webstorm's web server is giving me the problem. Because the URL itself is working perfectly but something like this pops up it is not working. Here the problem URL: http://localhost:63342/index.html/?_ijt=lolp00gelspdn9620js7nutuev. Her is the working URL: file:///C:/Documents%20and%20Settings/Administrator/Desktop/Computer%20Science%20ISU%20Websites/Second%20ISU%20website/index.html. Hope that helps!
Please sign in to leave a comment.
Seems you have just opened index.html via File | Open, without creating a project first? Serving such files doesn't work, https://youtrack.jetbrains.com/issue/WEB-15729. You need creating a project first - just open `C:/Documents and Settings/Administrator/Desktop/Computer Science ISU Websites/Second ISU website` folder via File | Open to get the project created, and then use Run or Debug in index.html file right-click menu to debug your file.
Please can you attach a screenshot that shows up the issue? I mean a screenshot of your browser with URL loaded and 404 error
>http://localhost:63342/index.html/?_ijt=lolp00gelspdn9620js7nutuev
If you are using WebStorm's built-in web server .. then URL should either be http://localhost:63342/PROJECT_NAME/index.htm or http://PROJECT_NAME:63342/index.htm (note the PROJECT_NAME part - it's required by built-in web server to know what files to serve (similar to what domain name is used by Apache/nginx/IIS/etc -- to identify what web site to serve).
How did you generate your current URL?
P.S. have a look at this SO question on how you can make such URL working:
Yep, it works now. But I have a bunch of files which weren't created Webstorm. How do I make those files work?
>But I have a bunch of files which weren't created Webstorm. How do I make those files work?
sorry, don't understand what you are talking about... All .html files can be run in the same way, regardless of the tool they were created with. But not all applications can be run on the built-in webserver - if your application is designed to be served from web server root, or uses HTML5 routing that requires server side rewrites, you need using a different web server
Plus the server refuses to run a simple PHP script. While I have no knowledge of PHP, I copied the script from W3Schools, where it works perfectly, into Webstorm. This leaves a question: If it can't run server side languages, what is the purpose of it? Here is the script that I copied:
<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>
Yes, built-in webserver can't interpret PHP (or, rather, it can't do it in WebStorm - when using PHPStorm or IDEA Ultimate, you can choose PHP interpreter to run PHP with, and host your PHP apps on built-in webserver)
>This leaves a question: If it can't run server side languages, what is the purpose of it?
Great question :) Seems you need some googling - in case you can't find the answer at W3Schools
I am saying that I have a bunch of .html, .css, .js files which weren't created in Web Storm (they were created in Sublime Text 3). And it seems that if the file wasn't created in Webstorm, it will give me a 404. So from this, I can say that WebStorm web server needs additional files for the web server to run. The question is which ones?
I am not planning on learning or using PHP for a long time (through I will use it eventually), so there is really no point for me to switch to PHPStorm right now. I initially found JetBrains through one of their advertisements on CSSTricks about Webstorm. Since they claimed that it has advanced debugging features for Javascript and advanced autocompletion for HTML (no data-* autocompletion?) CSS and JavaScript. These were the primary reasons why I decided to download it. Plus it has built-in emmet. But I discovered that after I installed it.
I usually link .css files and .js files to my .html files.
>And it seems that if the file wasn't created in Webstorm, it will give me a 404.
No, definitely not. You don't need to create files in WebStorm to be able to open them on built-in webserver. But you have to make sure that the files you try to run/open in browser belong to the current project
>The question is which ones?
No additional files are needed, but you need to have the project opened
So how do create a project for already existing files?
File | Open, choose a directory where your files are located
Also, how do I create snippets?
Official help page: https://www.jetbrains.com/help/webstorm/2016.3/live-templates.html
see also
https://confluence.jetbrains.com/display/PhpStorm/Live+Templates+%28Snippets%29+in+PhpStorm
How do I tell Live Templates where to put the caret on? In Sublime Text 3, it is done by $number. so that to put at that place. Also, how do I make so the live template automatically highlights some text? In Sublime Text 3, ${number:the text to be highlighted}. In Webstorm however, it just dumbly printed out everything, including the dollar signs (and gave me a bunch of errors because of that). For example, <title>$1</title> means to put the caret between the title tags. <link rel = "icon" href = "${2:Tab logo.jpg}" />. This means that after tab was pressed, highlight Tab Logo.jpg. But Webstorm just dumbly printed all of this instead of instead of highlighting or put the caret there. So how do I do it?
Also, is there a way for Webstorm to automatically put spaces around the equal signs and before empty tags?
see https://www.jetbrains.com/help/webstorm/2016.3/live-template-variables.html#pdtv:
`$END$indicates the position of the cursor after the template is expanded`there are no variables for highlighting; however, I don't understand what highlighting is meant. For example, what does "highlight Tab Logo.jpg" do?
>In Webstorm however, it just dumbly printed out everything, including the dollar signs
everything, except for variables that use $var_name$ syntax, appear as is - what you type is what you get
> is there a way for Webstorm to automatically put spaces around the equal signs and before empty tags?
File | Settings | Editor | Code Style | HTML, Other, Spaces: 'Around '=' in attributes', 'In empty tag'
Here is the full snippet:
<snippet>
<description>HTML5 Website Boiler</description>
<content><![CDATA[
!DOCTYPE html>
<html lang = "en-us">
<head>
<title>$1</title>
<link rel = "stylesheet" type = "text/css" href = "stylesheet.css" />
<link rel = "icon" href = "${2:Tab logo.jpg}" />
<meta charset = "UTF-8" />
<meta name="viewport", content = "width=device-width, initial-scale=1.0" />
<!-- Script for Live Reload plugin -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<!-- Script for Live Reload plugin (complete) -->
</head>
<body id = "body">
<!-- Navigation bar setup -->
<header class = "mainHeader">
<img src = "$3" alt = "$4" class = "Image" title = "$4" />
<nav class = "mainNavBar">
<ul>
<li>
<form method = "post">
<button type="button" value="submit" class="Button" onclick="${5:buttonFunction(this)}" id="active" title="${7:Introduction}"><a href = "${6:index.html}" title = "${7:Introduction to $8}" class = "buttonLink">${7:Introduction}</a></button>
</form>
</li>
<li>
<form method = "post">
<button type="button" value="submit" class="Button" onclick="${5:buttonFunction(this)}" title="$10"><a href = "$9" title = "$10" class = "buttonLink">$10</a></button>
</form>
</li>
<li>
<form method = "post">
<button type="button" value="submit" class="Button" onclick="${5:buttonFunction(this)}" title="$12"><a href = "$11" title = "$12" class = "buttonLink">$12</a></button>
</form>
</li>
<li>
<form method = "post">
<button type="button" value="submit" class="Button" onclick="${5:buttonFunction(this)}" title="$14"><a href = "$13" title = "$14" class = "buttonLink" >$14</a></button>
</form>
</li>
</ul>
</nav>
</header>
<!-- Navigation bar setup (complete) -->
<!-- Paragraph about $15 -->
<section class = "Container" title = "About $15">
<header class = "ContainerHeader" title = "About $15">
<h1 title = "About $15">$15</h1>
</header>
<footer class = "ContainerFooter" title = "About $15">
<p>This post is written about $15 and is written by Misha.</p>
</footer>
<content class = "ContainerContent" title = "About $15">
<p>$17</p>
</content>
</section>
<!-- Paragraph about $15 (complete) -->
<!-- Another paragraph about $18 -->
<section class = "Container" title = "More on $18">
<header class = "ContainerHeader" title = "More on $18">
<h1 title = "More on $18">$18</h1>
</header>
<footer class = "ContainerFooter" title = "More on $18">
<p>This post is written about $18 and is written by Misha.</p>
</footer>
<content class = "ContainerContent" title = "More on $18">
<p>$20</p>
</content>
</section>
<!-- Another paragraph about $18 (complete) -->
<!-- Setting up the sidebar -->
<aside class = "Sidebar" title = "Sidebar">
<a href = "$21" title = "${22:Learn more by clicking this link"} class = "sidebarLink" >${22:Learn more by clicking this link.}</a>
</aside>
<!-- Setting up the sidebar (complete) -->
<!-- Setting up another sidebar -->
<aside class = "Sidebar" title = "Sidebar">
<article class = "sidebarContainer" >
<header class = "sidebarHeader" title = "$22">
<h1>$23</h1>
</header>
<content class = "sidebarContent" title = "$22">
<p>Did you know that $24?</p>
</content>
</article>
</aside>
<!-- Setting up another sidebar (complete) -->
<!-- Setting up the footer -->
<footer class = "mainFooter" title = "Terms and Conditions">
<p>${25:Copyright © 2016 by Misha. All rights reserved}</p>
</footer>
<!-- Setting up the footer (complete) -->
<br /><a href="#" class = "goToTopLink" title = "Go to Top">Go to Top</a>
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>website-boiler</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html entity.name.tag</scope>
</snippet>
First I would like to say that this is an XML file with an extension of .sublime-snippet. Each one of those dollar signs without the curly braces tell Sublime Text 3 to put the caret at that particular place. If there are two or more places with the dollar and the same number it will put 2 or more carets at those places. The ones with curly braces are the ones to be highlighted and the content inside the braces is to be highlighted. The comments say and the XML tag names describe what that each tag does. For more information check this link out: https://www.youtube.com/watch?v=zS_4yLizMBw&index=8&list=PLpcSpRrAaOaqQMDlCzE_Y6IUUzaSfYocK
I see what highlighting means now, thanks:) In WebStorm, each variable is "highlighted" when applying the snippet: after a template is expanded, variables appear in the editor as input fields.
So, in Sublime terms, $END$ is a dollar sign without the curly braces, all custom variables - dollar sign with the curly braces. You can specify default values for your variables or use special functions to generate the value.
Actually, I'd suggest visiting the links I have provided. You will find all this info there
But my question is can I do multiple $END$s? Similarly, is it possible to do multiple $VARIABLE$s. Like for $END2$, $END3$ etc. etc. And similarly for variables. I haven't been able to find that in the docs.
You can't have multiple $END$ vars - multiple cursors are not supported when using live templates (https://youtrack.jetbrains.com/issue/IDEA-140853). But you can use as many custom variables as you like - they will be highlighted one-by-one while expanding the template
So I have two questions. How do I put the code to be highlighted in the custom variable and what is the syntax for multiple variables? Again, I want to use the live template for HTML5 and CSS3.
Sorry, but what about reading the docs (finally)? See https://confluence.jetbrains.com/display/PhpStorm/Live+Templates+%28Snippets%29+in+PhpStorm#LiveTemplates(Snippets)inPhpStorm-CreatingLiveTemplates, for example.
Smth like:
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>$END$</title>
<link rel = "stylesheet" type = "text/css" href = "stylesheet.css" />
<link rel = "icon" href = "$ICON$" />
Once you define this text and set the context (HTML), click the Edit variables, in dialog that opens specify a default value for $ICON$ variable - "logo.jpg"
Live Edit is not working for me. I have installed the Jet Brains (Live Edit) app on Google Chrome and enabled Live Edit in Webstorm. I restarted Webstorm and Google Chrome but it still doesn't work. Why? What is the problem?
No idea. Please record a screencast of your actions. And, for God's sake, please create new threads for new problems/questions. This one is already hardly manageable
What is a screencast?
What I did was that I saved the file and on Sublime Text 3, it automatically reloaded the file without me having to do it (but it was done using the live reload plugin from Google Chrome). I expected something similar for Webstorm to do, through it didn't. What is the problem?
Screencast is a video.
Live Edit only works during Debug session. Please see https://confluence.jetbrains.com/display/WI/Live+Edit.
Note that this is my last reply in this thread. In case of further problems/questions, please start new threads
I didn't enable debug. That is probably why Live Edit wasn't working.
I had this problem.
My path was http://localhost:63342/#3/index.html (notice the folder name " #3") and this name was a problem.
My solution is to change the symbol "#" by "%23" in the path configuration, so it would be http://localhost:63342/%233/index.html , and then it works.
The built-in webserver does indeed have problems serving files when using special characters in file/folder names, see https://youtrack.jetbrains.com/issue/WEB-28373, https://youtrack.jetbrains.com/issue/WEB-22486, https://youtrack.jetbrains.com/issue/WEB-26362, etc.