I have defined a plug in my App.Endpoint module in the following way:
plug(
Plug.Static,
at: "/",
from: :main_web,
gzip: false,
only: ~w(css fonts images webfonts favicon.ico robots.txt sw.js manifest.json js/app.js),
headers: %{"Access-Control-Allow-Origin" => "*"}
)
Everything works as expected except that this plug is not applied for /js/app.js
I am currently not able to serve just /js/app.js, but instead am only able to specify js which will serve all the files in the /js directory.
How can I specify just this js/app.js file and not others?
I have tried
only: ~w(... app.js)
only_matching: ~w(... js/app.js)
But I always receive 404 for /js/app.js
Related
I'm deploying a Vuejs application on App Engine, after deployed when I visit the application link I get 404 error:
in the log I see this error:
Static file referenced by handler not found: dist/index.html
The file structure on App Engine is:
App Engine
dist
index.html
app.yaml
My App.yaml file:
runtime: nodejs12
instance_class: F2
handlers:
# Serve all static files with urls ending with a file extension
- url: /(.*\..+)$
static_files: dist/\1
upload: dist/(.*\..+)$
# catch all handler to index.html
- url: /.*
static_files: dist/index.html
upload: dist/index.html
I tried to upload a test folder and create an index.html file inside it and change the handler URL to point to the test folder, it worked, but with the dist folder it doesn't work.
Any help with this issue?
Can you try changing your App.yaml to
runtime: nodejs12
instance_class: F2
handlers:
# Serve all static files with urls ending with a file extension
- url: /(.*\..+)$
static_files: dist/\1
upload: dist/(.*\..+)$
# catch all handler to index.html
The RE which you are using for URL should cover all the directories. If you want to query for only particular extensions, you can check the following documentation.
I've gone through several Stack Overflow pages and the official Vue guide, but my app still returns 404 results when going to a different page.
The structure of my app looks like this, with a client folder that has the Vue app and a server folder containing app.py that statically serves the index.html in the client/dist folder through Flask.
Contents of static.json are as outlined in the guide:
{
"root": "client/dist",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
with just modified root folder to go to client/dist. Running the app locally with npm run serve works, as does opening it up on its Heroku page and clicking on the nav. However, directly going to a page, such as /translate, always returns 404.
I have installed the following buildpacks:
=== readiglot Buildpack URLs
1. heroku/nodejs
2. heroku/python
3. https://github.com/heroku/heroku-buildpack-static
The app is hosted here: https://www.readiglot.herokuapp.com.
On npm run build from the root directory, the dist folder is built by Heroku in the client folder.
Am I missing something? Could anyone advise as to additional configuration?
The answer is in the app.py file - you need to statically serve the file using a catch all route.
#app.route("/", defaults={"path": ""})
#app.route("/<string:path>")
#app.route("/<path:path>")
def index(path):
return app.send_static_file("index.html")
By putting the serve_static_file in the Flask app to redirect from all other routes, 404 only shows up on a true 404.
I tried to load some icons and logos into my site using localhost, files are detected but are not loaded and it says "Not allowed to load local resource", I also tried to run the app using "npm install -g http-server" in terminal, but I had another error: "Failed to load resource: the server responded with a status of 404 (Not Found) #build.js:1"
There are two common options for loading images.
Through the public folder. e.g. <img src='/image/myImageName.png'>
Note: by specifying the root directory / vue is directed to the public folder
Or through the assets folder. e.g. <img src='#/assets/images/myImageName.png'>
Note: by supplying the # sign vue is directed to the src directory
I have started a project with vue-cli 3, my current directory tree is:
/
/dist
/public
index.html
favicon.ico
/src
/assets
/components
/plugins
when I run vue-cli build I get all sources bundled into app.js under /dist.
My goal is to bundle another bundle, say special-app.js from a few scripts either under /public or from a special directory under /src.
I was not able to achieve this in any way using the tsconfig or trying to augment the webpack config via vueconfig.js.
How can I bundle say /src/special/a.ts and /src/special/b.ts -> /dist/special.js?
UPDATE #1
I have tried the solution proposed by #digitaldrifter
config.entryPoints.delete('app');
config
.entry('app')
.add(path.resolve(__dirname, './src/widget/main.ts'))
.end()
config.entry('runner')
.add(path.resolve(__dirname, './src/donr/donr.ts'))
.add(path.resolve(__dirname, './src/donr/donr.scss'))
.end();
result is that there is no runner.js or runner.html at the end
UPDATE #2
The only way I got this to build correctly was to use pages https://cli.vuejs.org/config/#pages
pages: {
widget: {
entry: 'src/widget/main.ts',
template: 'public/index.html',
filename: 'index.html'
},
donr: {
entry: 'src/runner/donr.ts',
template: 'public/donr.html',
filename: 'donr.html'
}
}
build wise this worked! I got:
File Size Gzipped
dist/widget.js 4723.88 kb 841.16 kb
dist/app.js 4723.88 kb 841.16 kb
dist/donr.js 236.48 kb 56.84 kb
dist/test.js 191.93 kb 42.07 kb
PROBLEM
when I do vue-cli serve the donr.js is served as an HTML... while when I do build donr.js under /dist is all JS with the webpack header and all that good stuff. I do not understand why and I do not understand how to see the files that dev-server is serving, it is abstracted from me.... any ideas how to solve this?
UPDATE #3
forced dev-server to dump compiled files to disk.
I do not even see donr.js, while i do see it when i just build.
I am slowly coming to the idea that dev-server has a bug somewhere....
Github URL with the issue:
https://github.com/amoldavsky/vue-multi-bundle/tree/master
run npm serve VS npm build
any ideas?
You need to configure the webpack entry points.
Using chainWebpack option:
chainWebpack: config => {
// first clear the default app entry point
config.entryPoints
.delete('app')
// add a new entry with the necessary files
config.entry('special')
.add('/src/special/a.ts')
.add('/src/special/b.ts')
.end()
// you can split the bundle by entries also
config.entry('special-a')
.add('/src/special/a.ts')
.end()
config.entry('special-b')
.add('/src/special/b.ts')
.end()
}
I am using the DataTables library in my Rails 4.2.1 application. I have manually included all of the assets that are required including 1 js file, 1 css file, and 3 images. The js and css are properly precompiling but the images are not.
Currently the three images are located in vendor/assets/images/<name>.png. They are not precompiling (which after some research is intentional in rails 4.0+) and after attempting all of the fixes I could find on SO I still cannot get these images properly loaded by the asset pipeline. I have tried the following fixes to no avail.
Attempted fixes
Move images to app/assets/images
Add config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) to config/application.rb
Add config.assets.paths << Rails.root.join("vendor", "assets", "images") to config/application.rb
Errors
The error messages thrown by DataTables js are the following:
GET http://localhost:3000/vendor/assets/images/sort_both.png 404 (Not Found)
GET http://localhost:3000/vendor/assets/images/sort_asc.png 404 (Not Found)