I'm trying to make my existing react application progressive by adding among other things a manifest.json.
However it seems that my application is unable to find my manifest.json file as I get the above error message and Cannot GET /manifest.json when I take a look at the developer tool's network tab . This is strange since my manifest.json is located at the root of my application, exactly where the error says it cannot find the file.
I tried several things like placing a manifest.json file in every directory or introducing a json-loader in my webpack configuration but nothing worked.
Where I reference the manifest
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json" >
</head>
<body>
<div id="root" class="body"></div>
</body>
</html>
In addition I'm using webpack-manifest-plugin which creates an asset-manifest.json file in my build directory that maps my index files.
webpack.config
//...
const ManifestPlugin = require("webpack-manifest-plugin")
module.exports = {
plugins: [
new ManifestPlugin({
fileName: "asset-manifest.json"
})
//...
created asset-manifest.json
{
"index.js": "index.bundle.js",
"index.html": "index.html"
}
I hope you can help me
The problem is not only with manifest.json but with all json files. As it says here: https://stackoverflow.com/a/29633038/3231884 , you need to setup the web.config according to the following example:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
Afterwards, you should make 'npm run build' copy it to the build folder by following these steps (credits to Liviu Costea):
https://medium.com/hackernoon/adding-web-config-to-react-projects-3eb762dbe01f
change extension manifest
from manifest.json to manifest.txt
It should be an issue of manifest.json file.
Please show the contents of manifest.json file.
Try this, In manifest.json
the name property should be in small letters and contains no spaces.
Related
I'm trying to make a vue3 app run in a apache2 server, I did apache configuration of the site in sites-available and also did the symlink to sites-enabled. I don't have the ServerName ready bc I wanted to test it using the direct path from /var and when it's ready use the DNS. Here is the file:
<VirtualHost *:80>
# ServerName xyz.example.com.br
# ServerAlias xyz.example.com.br
ServerAdmin webmaster#localhost
DocumentRoot /var/www/html/agenda/dist
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
and my app is at var/www/html with the dist folder generated from yarn run build, as it is referenced in the file above. Here is the index.html from the dist folder:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/hrg.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Agenda EletrĂ´nica</title>
<script type="module" crossorigin src="./assets/index.02c23677.js"></script>
<link rel="stylesheet" type="text/css" href="./assets/index.db6e77a5.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
I added the dot before the href links because otherwise it interprets as the files are located at the /, not /dist (at least it was happening with the js file).
Anyways it just does not work. When I access the IP of the server followed by /agenda/dist it does not show anything, only favicon is loaded. It also doesn't bring any errors on browser console.
I would try to use nginx, but we do not use it here so I would like to keep it that way and only use it if necessary (maybe that's the case).
P.S: I'm using vite
I guess, you problem has nothing to do with Vue3 and is based on the improper apache2 configuration.
I am not sure, since I have configured apache2 for 10 years at least, but if your app is in /var/www/html then why your DocumentRoot points to /var/www/html/agenda/dist ?
Shouldn't it then point to DocumentRoot /var/www/html/ ?
I found the solution and I will leave it here if more people get stuck on it.
I am using Vue Router and in the index there are only two routes
const routes = [
{ path: "/", name: "Home", component: Home },
{ path: "/unidade/:id", name: "Andares", component: UnityHome },
];
As I didn't have the DNS ready and was trying to access it direct from /var path, as it is not a valid route in this file it does not show anything. Now with the DNS it works, because it is the correct path.
So just use a DNS already or change the route file to, in my case, /agenda/dist
const routes = [
{ path: "/agenda/dist", name: "Home", component: Home },
{ path: "/unidade/:id", name: "Andares", component: UnityHome },
];
I've created
a Blazor Server app (BlazorServerApp)(.Net Core 3.1)
a .NET Standard Class Library (MyClassLibrary)
I've added the MyClassLibrary project to the dependencies of the BlazorServerApp. Then I've added wwwroot folder to the MyClassLibrary project and added test.js file to this folder.
I've edited the MyClassLibrary project file as follows:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<AssemblyName>MyClassLibrary</AssemblyName>
<RootNamespace>MyClassLibrary</RootNamespace>
</PropertyGroup>
<ItemGroup>
<EmbeddedResource Include="wwwroot\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
</Project>
Blazor web app call the UseStaticFiles method in Startup, which enables static files to be served:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
I've added the test.js as <script src="_content/MyClassLibrary/test.js"></script> in the _Host.cshtml (BlazorServerApp project):
#page "/"
#namespace BlazorServerApp.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorServerApp</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">đŸ—™</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="_content/MyClassLibrary/test.js"></script>
</body>
</html>
However, when I run the BlazorServerApp project the error appears in the browser:
GET https://localhost:5001/_content/MyClassLibrary/test.js net::ERR_ABORTED 404
That is, the web app doesn't find such a resource at the specified path.
Can anyone explain why this is happening and what needs to be done in order for the application to access static resources (such as js or css) in other dependent projects (net standard class library in my case)?
Open the component project properties and go to package tab.
You must set a value in Package id
Then you use this id to specify the path
<script src="_content/package_id/test.js"></script>
I know this was about two years ago, but I found an answer to this.
If you are running your app in Development, chances are you are finding your static web assets just fine. But, if you change your ASPNETCORE_ENVIRONMENT to anything else you will find you get a bunch of 404 errors when trying to get your assets.
To work around this add StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment,builder.Configuration); to your main Main method, or your Program.cs in .net 6.
I found this information here on the aspnetcore github. They talk more about the static asset loader here which is where I found how to use it, but the issue on 38212 seemed to be unrelated. I didn't do a deep dive on how the static asset loader worked though, or why it's needed.
I have deployed a simple node based web app in Azure. Following is the structure of my code:
In my js code, when I do an xhr.get call to my json file (as shown below), it throws a GET https://<app-url>/locales/en-US.json 404 (Not Found).
xhr.open("GET", "locales/en-us.json", true);
...
xhr.send();
As seen below, the calls to my js file and css file are succeeding but the call to my locale file is failing. External calls are working fine too. Note: js and css files have been included as part script tag and link tags respectively in my index.html file.
Could someone please help?
It's a common issue of Azure Website which be lack of the mimetype setting for static json file, please refer to the blog. You just need to add the configurate below into your web.config file under wwwroot.
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
Then it works via your browser.
I was trying to setup the sample project for ejs (embedded js), given on their website homepage (http://embeddedjs.com/) in my typescript project.
I received the error There is no template at templates/supplies.ejs. But the path is there, the template is in templates/supplies.ejs why is it not working?
You need to add mime type into the web.config file like this
<system.webServer>
<staticContent>
<mimeMap fileExtension=".ejs" mimeType="text/plain" />
</staticContent>
</system.webServer>
into the <configuration> element in your web.config file.
I have the following in my Razor view for an editor template in my Orchard module:
Script.Include("assets.js").AtFoot();
When the page is rendered I can see this line at the bottom:
<script src="/Modules/MyModuleName/scripts/assets.js" type="text/javascript"></script>
Beautiful! Only problem is, when I visit that path I get a 404 error. The script doesn't exist.
...but it does! It's saved as Orchard.Web\Modules\MyModuleName\Scripts\assets.js
The rest of my module's functionality works fine - I can enable and use it, it just won't find the script file. Am I missing something obvious here?!
By default, Orchard is setup to restrict folder permissions. This is usually overriden by adding a web.config to each folder as required (in this case, your scripts folder).
If you use the codegen module to generate your module, then this is done for you as part of the generation. If not, then you need to add the web.config yourself.
The codegenned web.config looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<appSettings>
<add key="webpages:Enabled" value="false" />
</appSettings>
<system.web>
<httpHandlers>
<!-- iis6 - for any request in this location, return via managed static file handler -->
<add path="*" verb="*" type="System.Web.StaticFileHandler" />
</httpHandlers>
</system.web>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
</staticContent>
<handlers accessPolicy="Script,Read">
<!--
iis7 - for any request to a file exists on disk, return it via native http module.
accessPolicy 'Script' is to allow for a managed 404 page.
-->
<add name="StaticFile" path="*" verb="*" modules="StaticFileModule" preCondition="integratedMode" resourceType="File" requireAccess="Read" />
</handlers>
</system.webServer>
</configuration>
I found an other reason for this 404 which I would like to mention. UrlScan by default rejects a dot in the path, I found this in my log:
Rejected URL+contains+dot+in+path
So change the setting in:
AllowDotInPath=1
and it works again. It took me some time to find this, because I never use a dot in path...