The default directory structure when using vue-cli contains a 'public' directory and 'src' directory. The public directory contains index.html. What exactly is the purpose of putting index.html in the public directory instead of src? What are other examples of files that should go in public?
Files placed in the public folder are static and will not be processed by webpack.
"Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack"
Source: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Example may include: Favicon, icons for PWA, robots.txt, manifest.json... Just to name a few.
Related
When I publish the project: npm run build a folder that I created with images is missing from the dist folder.
I created this folder inside the src folder.
assets folder is also missing.
Where is it?
If you just want some folders included verbatim, put them in the public folder.
Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.
Things within src are only included if they're part of the bundle (ie they have been imported / required) and even then, any folder structure won't be preserved. Bundled items are typically renamed with a hash checksum and all put into a single folder like js, css, images, etc.
I have a php file under of static folder.
How can i browse the php file?
I tried to use a proxy on config, but its not working
/pages
/static
test.php
How could i browse it
localhost:port/[proxy]/test.php
Thanks
I guess you would need a webserver to handle your .php file.
/static folder is for static content.
This is what i found in the documentation:
If you don't want to use Webpack assets from the assets directory, you can create and use the static directory (in your project root folder).
All included files will be automatically served by Nuxt and are
accessible through your project root URL. (static/favicon.ico will be
available at localhost:3000/favicon.ico)
https://nuxtjs.org/guide/assets/#static
The way to serve static on the server side seems pretty straightforward in Express:
To serve static files such as images, CSS files, and JavaScript files,
use the express.static built-in middleware function in Express.
Pass the name of the directory that contains the static assets to the
express.static middleware function to start serving the files
directly. For example, use the following code to serve images, CSS
files, and JavaScript files in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are in the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
Express looks up the files relative to the static directory, so the
name of the static directory is not part of the URL.
To use multiple static assets directories, call the express.static
middleware function multiple times:
app.use(express.static('public'))
app.use(express.static('files'))
Express looks up the files in the order in which you set the static directories with the express.static middleware function.
I get the idea of a virtual path prefix, but why would you use it?
To create a virtual path prefix (where the path does not actually
exist in the file system) for files that are served by the
express.static function, specify a mount path for the static
directory, as shown below:
app.use('/static', express.static('public'))
Now, you can load the files that are in the public directory from the /static path prefix.
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html
I know it's a little late, but hope this could help you. BTW, I take no credit for the answer, just went to dive a little deeper on your concern and found this.
This technique comes in handy when providing multiple directories to serve static files. The prefixes are used to help distinguish between the multiple directories.
If you would like to dig deeper. I found it on this link:
https://guide.freecodecamp.org/nodejs/express/
I have laravel 5 and config file in the config folder and My css located in the resources folder which is a same level with public folder where located index.php. Virtual Host Apache config looks to the public folder as a root site directory, but in this situation I cannot declare correct path from /public/index.php to the resources folder.
From one side I can try easy way and just relocate public folder into root of the laravel, but I don't like this way, any ideas?
Use resource_path('path/to/your/css')
https://laravel.com/docs/5.3/helpers#method-resource-path
EDIT
The most logical is to include your stylesheets in your public folder though. If you need to style a page, the style is public anyway. So why not put in the public folder. There's 2 options to do this:
Do it manually by just copying/moving the files
Use an automated tool like Gulp or Laravel's own Elixir, which provides a really easy way to copy your assets.
add this code in public/index.php
$app->bind('path.public', function() {
return __DIR__;
});
On my project i have following routes (routes.rb)
resources :main, path: '/' do
collection do
get 'about'
get 'blog'
get 'resources'
get 'contact'
get 'projects-and-tutorials'
end
end
and these routes are loading files from public folder like about.html and contact.html, right now no css file is loaded on these pages.
I have created a css folder under public folder and will load css file from there on these public pages but i am not sure if it is good to go with
how can i load css files from app/assets/stylesheets or there is another way to load css on public files ?
You cannot load the files app/assets/stylesheets(not visible publicly) inside the files in public directory.
You can create a separate directory inside public folder and put your css files there. and then you can refer them directly.