I want to inject a url (process.env.loginProviderUrl) in a static page for an external authentication provider which I've placed in the static folder which Gatsby automatically copies over to the public folder when building.
<html>
<head>
<meta name="salesforce-community" content="{process.env.loginProviderUrl}" />
<script
src="{process.env.loginProviderUrl}/servlet/servlet.loginwidgetcontroller?type=javascript_widget"
async="true"
defer="true"
></script>
</head>
<body></body>
</html>
But because it's in the static folder, it only gets copied over and the process.env.loginProviderUrl will never get replaced. How do I dynamically generate an html file in Gatsby which then gets copied to the static folder?
If you move your file to a separate folder that isn't processed by Gatsby you can instead set up a separate webpack configuration that will package files from that folder and provide them with ENV vars.
Alternately you could create a postbuild routine that uses simpler shell commands to find and replace instances of process.env.loginProviderUrl with the value from the local environment (e.g. sed).
This said, it may simply be easier to find another way to include this file in your Gatsby app.
Related
My Problem is quite simple and yet I'm finding it so hard to solve it.
The problem is I am not able to load the CSS File and image which are on the static folder located on the root folder of the project. The static folder is not under the app name.
My project name is "ecommerce" and my app name is "store".
This is my file hierarchy for my project.
This is my settings.py
I have added my app too.
Yes, the STATICFILES_DIRS too.
Tried the other one too.
STATICFILES_DIRS = [
BASE_DIR / "static",
]
I used temp.html for showing the demo and here is my code.
And the CSS file which is named main.css
After doing all the things properly, the CSS file and image won't load.
Errors That I got in my terminal
And in developer mode in Chrome
As I know this is quite a rookie mistake and I am a beginner. I can't continue forward till this problem is solved. I'd be grateful if someone could come forward and assist me in resolving the issue.
First of all move your static folder in app directory that is store here
Now make another store folder inside the static
static/store
Now make all folders like css, js and img in static/store directory. Then Replace your css link in this link
<link rel="stylesheet" href="{% static 'css/main.css' %}">
And img tag link.
<img src="{% static 'images/cart.png' %}" alt="My image">
I have an HTML project that I want to send to the user's browser via nodejs. Since each HTML file has a set of linked files like style.css, how do we do that?
Do I have to use "app.use" in express.js? Because in this case I have to send the whole project files (even unvisited pages file) to the user !!!
We do what is called a "public" folder. Inside this public folder, anyone can access these files. If your domain was example.com, and inside the public folder we have style.css, we can access sit by example.com/style.css. Any other files that are not in the public directory the user will not be able to access (unless you manually serve them in Express).
You do it in Express like this:
app.use(express.static(__dirname + '/public'));
So put all the files you want to access in the HTML file in the public directory.
You can link a CSS file in your HTML file (in the head tags) like:
<link rel="stylesheet" type="text/css" href="/style.css" />
Here's what you directory can look like:
- index.js (your main server)
- / public
- style.css
- someOtherFile.js
- etc...
- Your other files...
I have deployed a React + NodeJS app in Heroku and the deployment went well and worked for a few hours. However, after a cache deletion, it now refuses to load the page. The errors are the following ones:
Refused to apply style from 'https://flix-reloaded.herokuapp.com/src.78399e21.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
and
GET https://flix-reloaded.herokuapp.com/src.78399e21.js net::ERR_ABORTED 404 (Not Found)
The first one, the MIME error refers to a minified file produced by a Parcel build. It is called in a index.html file that lives inside the dist folder. This is the line calling it:
<link rel="stylesheet" href="/src.78399e21.css">
Its twin .js file is also called within index.html:
<script src="/src.78399e21.js"></script>
Problem 1): I don' know what to do to make the CSS file accepted. within it, there are some comments imported from the SCSS original files related to each component. I tried both to remove the comments and add the type of the file as CSS but it hasn't worked. It should be a subtle detail, but I don't know what else to attempt.
Problem 2: The JS file that Heroku is not finding it is at the same folder of the index.html. However, the routing of the app has been defined to have client (Router basename="/client") as root (https://flix-reloaded.herokuapp.com/client). If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
I tried to run another Parcel build, commiting changes, clean caches, but nothing worked. Can anyone provide me some help? I'll be happy to provide further details if necessary.
The index.html file code that lives inside the dist folder (where the production files live):
<html>
<head>
<title>myFlix</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/src.78399e21.css"></head>
<body>
<div class="app-container"></div>
<script src="/src.78399e21.js"></script>
</body>
</html>
Thanks in advance
If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
This is because you need to make the same /client/ fix to the <script src="/src.78399e21.js"></script> line.
In both cases, you've got the wrong URL for your CSS/JS files, and as a result the CSS/JS parsers are trying (and failing) to process the resulting 404 page's HTML as CSS/JS.
I have created a Swagger documentation with a yaml file under:
api/swagger/swagger.yaml
Now I want to share a static HTML document with its definition, yet it was stated on the swagger project, that they don't plan to support HTML generation at all.
How can I generate a static HTML file from a Swagger project?
The easiest way I can think of is to use Swagger Editor:
Go to: https://editor.swagger.io
Click on "File" in the top menu bar and then select "Import File"
After import, click on "Generate Client" in the top menu bar, and then select "HTML" or "HTML2" to generate static HTML documentation
editor.swagger.io uses generator.swagger.io to generate API clients, server stubs and documentation, and generator.swagger.io is powered by the open-source project Swagger Codegen.
Download https://github.com/swagger-api/swagger-ui - folder of interest is "dist"
Copy your Swagger JSON into the dist folder
Open index.html and change the value of URL inside the tag at the bottom of the file to ./swagger.json (or whatever your swagger json is called) (see here)
Host online! (or start a local server to view output).
There is swagger2markup-cli that can generate a static adoc file.
Ensure that you have Java runtime installed. (I am using Java(TM) SE Runtime Environment (build 1.8.0_111-b14)).
You fetch the jar:
wget https://jcenter.bintray.com/io/github/swagger2markup/swagger2markup-cli/1.1.0/swagger2markup-cli-1.1.0.jar
And you can generate the a static adoc with it via:
java -jar ~/your/path/swagger2markup-cli-1.1.0.jar convert -i api/swagger/swagger.yaml --outputFile static-swagger
That adoc file can then be converted into a html file via asciidoctor:
asciidoctor *.adoc
You may need to install it, as I am using Ubuntu, I could via:
sudo apt-get -qq install asciidoctor
Are you trying to export it to create single documentation from different services? If yes, an alternative might be https://github.com/varghgeorge/microservices-single-swagger. This simple springboot microservice will show all your swagger documentation (from different servers) in one place based on YAML config.
Another answer suggested the Swagger Editor
, which is great. However, to obtain a single file to import into it:
npm install -g #apidevtools/swagger-cli
swagger-cli bundle openapi.yaml --outfile ./openapi-expanded.json --type json
The above command assumes your root file is named openapi.yaml and you want an output JSON file openapi-expanded.json: that JSON is what you'll import.
Use an HTML file like this to load your OpenAPI definition:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//unpkg.com/swagger-ui-dist#3/swagger-ui.css">
<title>Your App API v1</title>
<body>
<div id="your-app-docs" />
<script src="//unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"></script>
<script>
window.onload = function () {
const ui = SwaggerUIBundle({
url: "openapi.yml",
dom_id: "#your-app-docs",
deepLinking: true,
})
}
</script>
</body>
</html>
You can then later host it locally or use a service like Netlify to host it on the web.
I have do to some changes in Javascript files. i deployed in my server and reset IIS.
I tried to launch from IE , the latest modified file changes cannot appear. It reads old file.
If I have to clear the cache , it will work. without clear cache how to work with latest files.
Please give a guidance to resolve this issue.
Thanks.
//try to get the value for time now and to add it to the script file url as version id
<html>
<title>
<script src='http://example.com/js/main.js?ver=<%=DateTime.Now.Ticks%>'
type='text/javascript' ></script>
<title>
<body>
</body>
</html>
You should check cache control options in your IIS.
For flushing cache you can use some variables in js links.
For example:
http://domain.com/js/main.js
and
http://domain.com/js/main.js?ver=1
downloads same file, but second link downloads file like new resource