I am building a chrome extension with create-react-app.
This gives me a folder structure as follows:
my_app/
public/
options.html
popup.html
manifest.json
src/
background.js
index.js
options.js
I want to add a new html page to the extension which can then be called via chrome-extension://[runtime_id]/my_new_page.html
To do so, I placed my_new_page.html in the /public folder and added it to manifest.json under web_accessible_resources.
However when I load chrome-extension://[runtime_id]/my_new_page.html I get only the boilerplate of my_new_page.html and the js which is supposed to render the app content, is not run.
Turns out the problem was with the way my webpack.config handled my bundles. Whatever goes into the build folder is handled by webpack and thus configurations might be required - and can vary depending on what boilerplate/template you are using.
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.
I have very strange behavior in my application. I want to add multiply static path to my app.js file.
First for main application:
app.use(express.static(path.join(__dirname, 'public')));
And second for landing pages which located in 'ads' directory.
app.use('/ads', express.static(path.join(__dirname, 'ads')));
Folder structure:
public
- build
- ...
ads
- currency
- public
- build
- 1.css
- 2.js
- index.html
...
app.js
In my main application all JS and CSS files loading successfully, but when i get in to path /ads/currency my index.html loaded but .css, .js and images don't. However if i pass to command line /ads/currency/public/build/1.css it is loading normal.
Does someone know about it?
Screenshots was attached:
Nginx config:
It has nothing to do with your configuration but might be related to Chrome (i.e. an extension), since the error says ERR_BLOCKED_BY_CLIENT.
Check your ad blockers log. The keyword ads in the path might be blocked, since a filter might try to catch a javascript miner.
You should make sure the move the whole "ads" part into a different folder - avoiding the keyword "ads" at all. Disabling the ad blocker might work for you know, bot not for your users
I just built my app with quasar CLI.
This is my quasar info:
I made a regular spa build knowing that it’s not be sitting directly in root folder on the server, so I changed publicPath:
Server-side static frontpage files are served OK for the main page and the main page has a link pointing to http://localhost:3000/application which produces blank page with this error:
Elements tab looks skim, #q-app does not have any content:
Network connections with 30x status:
What am I missing? Could it be related to build itself or is it something in my node-server?
Github said something about lazy-loaded components and dynamic-import-node plugin, so I added it before build:
I've gone through script tags in the DOM just to see that their source attributes where all absolute, so I changed them to relative paths by modifying quasar.conf like this:
publicPath: '/application'
That's all it took to make it work :)
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.
Hi I created a sails app completely for api using. It doesn't has a view file, now I have a html, css, js directory structure, which I want to show as a front page of my app. My html directory structure is following.
+-ApiDocumentationApp
|
-script
|
-css
|
-images
|
--index.html
Now I don't want to use any templating engine like jade or ejs. Also I don't want to change the directory structure to sailsjs', asset and view system. Is there any way I can do it inside sailsjs?
Whatever your reluctance may be, by far the easiest solution here is to place all of your assets (scripts, css, images and index.html) under the /assets folder of your Sails app, and remove the default / route in /config/routes.js. Then your index.html file will be served up by Sails by default.
The alternative would be to modify the default Gruntfile.js (in Sails v0.9.x) or the individual Grunt tasks under /tasks/config (in Sails v0.10.x) to point directly to your top-level asset folders and files rather than ./assets. It's do-able, but error prone and less sustainable!