I have a configuration option for my Express app that determines whether to pull static content (JS, CSS, etc.) from a separate URL (e.g. using webpack-dev-server) or serving it "inline" via express.static() in the Express app. So I need to output a different origin depending on that configuration:
<script src="{STATIC_CONTENT_PATH}/[resource reference]"></script>
where {STATIC_CONTENT_PATH} is the web server's origin if serving inline, or the content server's origin if running separately. So far, I've only been able to get it to output a path that is relative to the site root (/publicPath/[resource reference]). Is there an easy way to add a prefix to the path used in the tags that the plugin outputs?
I don't think there's any existing option to do this, so I just used a template, which contains the following:
<%= _.map(htmlWebpackPlugin.files.js, (path) => `<script src="${htmlWebpackPlugin.options.staticContentURL}${path}"></script>` ).join("") %>
(I also passed through the URL as a config option to the plugin)
Related
I created a sample app using SvelteKit to perform SSR. I noticed the svelte assets are always downloaded following this path _app/immutable/.. (examples):
http://localhost:3000/_app/immutable/start-9080d3a7.js
http://localhost:3000/_app/immutable/chunks/index-cad423a5.js
http://localhost:3000/_app/immutable/layout.svelte-eb403b25.js
http://localhost:3000/_app/immutable/pages/up-homeui/index.svelte-d6a3b39b.js
http://localhost:3000/_app/immutable/error.svelte-3f23e1a2.js
How can I serve the assets at the root level, like:
http://localhost:3000/start-9080d3a7.js
http://localhost:3000/index-cad423a5.js
http://localhost:3000/layout.svelte-eb403b25.js
http://localhost:3000/index.svelte-d6a3b39b.js
http://localhost:3000/error.svelte-3f23e1a2.js
At the end, I would like to serve all the files at the same level.
I already played with the svelte.config and the vite.config but I couldn't find a way to change this default behavior.
In next.js that uses php-like approach - files in pages folder became url paths. Like /pages/reader.js will be loaded by url http://localhost/reader.
Problem is that i can't undersand how to use non-english url path in next.js?
Codesandbox example. (Update page to load from server)
Url example:
http://localhost/читатель
That changes internally by chrome to:
http://localhost/%D1%87%D0%B8%D1%82%D0%B0%D1%82%D0%B5%D0%BB%D1%8C
In next.js pages folder file named:
pages/читатель.tsx // not working
pages/%D1%87%D0%B8%D1%82%D0%B0%D1%82%D0%B5%D0%BB%D1%8C.tsx //working but i can't name files like that, i will not find what i need later.
Maybe php users resolved this somehow ;)
try to use encodeURI() of core javascript which can convert the specific characters to the required url form
const url=encodeURI('читатель.tsx');
console.log(url);//%D1%87%D0%B8%D1%82%D0%B0%D1%82%D0%B5%D0%BB%D1%8C.tsx
Then we can use this path to navigate
I'm fairly new to web development and I was wondering if there was a way to route a static web page with its own stylesheets and javascripts, using vue-router.
Let's say I have a directory called staticWebPage that contains:
an index.html file
a javascripts directory containing .js files
and a stylesheets directory containing .css files
Now, I'd like to map /mystaticwebpage to this index.html file so it displays that particular static web page.
I'd like to do something like this:
import VueRouter from 'vue-router'
import AComponent from './components/AComponent.vue'
import MyHtmlFile from './references/index.html'
router.map({
'/acomponent': {
component: AComponent
},
'mystaticwebpage': {
component: MyHtmlFile
}
})
Of course, this doesn't work as I can only reference Vue components in router.map.
Is there a way to route to that ./staticWebPage/index.html file using all the .js and .css file contained in the /staticWebPage directory?
So for your case you can do something that uses Webpack’s code-splitting feature.
More precisely, what you want is probably async components. So the code (and the css) used in the component definition (including any script you included there) will be loaded only when the corresponding page is accessed.
In large applications, we may need to divide the app into smaller
chunks and only load a component from the server when it’s actually
needed. To make that easier, Vue allows you to define your component
as a factory function that asynchronously resolves your component
definition. Vue will only trigger the factory function when the
component actually needs to be rendered and will cache the result for
future re-renders.
It can be a bit challenging to setup, so please refer to the dedicated guide in the VueJS doc.
I have a Sails.js 0.11.0 application with a master layout.ejs file. Right now, I am using the standard asset pipeline and loading all my CSS & JS by dropping them in the assets/styles and assets/js folders.
The issue with this approach is that the application loads ALL the CSS & JS files relevant to the site regardless of whether the page that is being rendered needs it or not. I would like to be able to load specific CSS & JS files based on the page while leaving the common stuff to still get loaded through the asset pipeline. How do I go about doing that? I couldn't find any documentation to get this done.
In production, everything should be getting minified so you won't be getting the multiple server hits that you are probably experiencing. Thus pull one style sheet and one js file.
If you really wanted to make this work though you could disable using the layout and include in each view the actual files you want to include, but you lose a few things with this approach.
-If you run through the Sails.js pipeline the files won't be auto added or removed when you add them to the js folder
-Minification will break your application so you would need to manually setup your own build process to properly handle or disable minification.
Hope this helps.
Create a local folder assets/js/local to store any scripts that you might want to load separate to the pipeline.
Then in your tasks/pipeline.js file add the '!js/local/*.js' line to ignore any script files in the local folder.
var jsFilesToInject = [
// Load sails.io before everything else
'js/dependencies/sails.io.js',
// Dependencies like jQuery, or Angular are brought in here
'js/dependencies/jquery-3.3.1.min.js',
'js/dependencies/popper.min.js',
'js/dependencies/**/*.js',
// All of the rest of your client-side js files
// will be injected here in no particular order.
'js/**/*.js',
//Ignore local injected scripts
'!js/local/*.js'
];
In your views/layout.ejs template add a block under the SCRIPTS block...
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/jquery-3.3.1.min.js"></script>
<script src="/js/dependencies/popper.min.js"></script>
<script src="/js/dependencies/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
<!--SCRIPTS END-->
<%- blocks.localScripts %>
In your page view template call your file/s...
<% block('localScripts', '<script src="/js/local/myLocalScript.js"></script>') %>
<div class="container">...</div>
I would like to use the swagger-ui dist 'as-is'...well almost as-is.
Pulled down the latest release from github (2.0.24) and stuck it in a folder in my app. I then server it out statically with express:
app.use('/swagger', express.static('./node_modules/swagger-ui/dist'));
That works as expected when I go to:
https://mydomain.com/swagger
However I want to populate the url field to my swagger json dynamically. IE I may deploy to different domains:
https://mydomain.com/api-docs
https://otherdomain.com/api-docs
And when I visit:
https://mydomain.com/swagger
https://otherdomain.com/swagger
I would like to dynamically set the url.
Is that possible?
Assuming the /api-docs (or swagger.json) are always on the same path, and only the domain changes, you can set the url parameter of the SwaggerUi object to "/path/to/api-docs" or "/path/to/swagger.json"instead of a full URL. That would make the UI load that path as relative to the domain the UI is hosted on.
For reference, I'm leaving the original answer as well, as it may prove useful in some cases.
You can use the url parameter to set the URL the UI should load.
That is, if you're hosting it under https://mydomain.com/swagger you can use https://mydomain.com/swagger?url=https://mydomain.com/api-docs and https://mydomain.com/swagger?https://otherdomain.com/api-docs to point at the different locations.
However, as far as I know, this functionality is only available at the current alpha version (which should be stable enough) and not with 2.0.24 that you use (though it's worth testing).
Another method would be to use the swagger-ui middleware located in the swagger-tool.
let swaggerUi = require('../node_modules/swagger-tools/middleware/swagger-ui');
app.use(swaggerUi(config.swagger));
The variable config.swagger contains the swagger.yaml or swagger.json. I have in my setting
let config = {
appRoot: __dirname,
swagger: require('./api/swagger/swagger.js')
};
Note: I am using the require('swagger-express-mw') module
You could try with this on index.html file of the swagger-ui... It works for me.
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = window.location.origin + "/path/to/swagger.json";
}