.(.git repository)
├── css
│ └── style.css
└── index.html
I'm in index.html, and type <link rel="stylesheet" href="/<C-x><C-f>.
Expected completion: css/, index.html.
But now: /Applications/, /bin/, /usr/, etc.
Is there a good .vimrc settings or plugins to solve this?`
Related
I am building a simple web app with Rust and I am trying to display an image to the website. But I can't add that image.
I am using Rust with a framework called Yew and with a tool Trunk.
I have successfully linked the .scss file to my website with Trunk. As they described in their documentation.
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yew Development</title>
<link data-trunk="" rel="scss" href="main.scss"> <!-- Successfull linked to this file -->
</head>
<body></body>
</html>
The .scss file does its work successfully.
But how can I display an image with Rust file with the html! macro?
main.rs
use yew::prelude::*;
fn main() {
yew::start_app::<App>();
}
#[function_component(App)]
fn app() -> Html {
html! {
<>
<h1> {"Hello world!"}</h1>
<link data-trunk="true" rel="copy-file" href="img/rust.png"/> // doesn't work
<img data-trunk="true" src="img/rust.png" alt="rust image"/> // doesn't work
<img src="img/rust.png" alt="rust image"/> // doesn't work
</>
}
}
Trunk's docs about how to add image.
But the doc wasn't helpful for me.
What you must do is instruct trunk to copy your static assets into the dist directory.
Let's suppose you have a directory called img with all the images, next to your src directory at the root of your project:
/home/me/code/my-yew-test
├──Cargo.lock
├──Cargo.toml
├──index.html
├──src
│ └──main.rs
└──img
└──rust.png
Add this line to your index.html header:
<link data-trunk rel="copy-dir" href="img">
This line won't be present in the production index.html file, it's only an instruction for trunk.
Now the files of the img directory will be served by trunk (and copied into the dist directory for production) so you can have this link in your html! macro:
<img src="img/rust.png" alt="rust image"/>
data-trunk attributes here would make no sense: trunk only reads and parses the index.html file, it doesn't see what's generated client side by the wasm code produced by the html! macro.
Your dist directory will look like this:
/home/me/code/my-yew-test
├──Cargo.lock
├──Cargo.toml
├──dist
│ ├──dysp-8a629f50b28a5e37.css
│ ├──index-8c2be3ebf3bd7075.js
│ ├──index-8c2be3ebf3bd7075_bg.wasm
│ ├──index.html
│ └──img
│ └──rust.png
├──index.html
├──src
│ └──main.rs
└──img
└──rust.png
All <link data-trunk ... /> elements must be in the static HTML files (such as index.html), not in the dynamically generated virtual DOM nodes via html!. This is because Trunk runs as a back-end process to determine what exactly is distributed as part of the main application, and this is a process which must be done in advance.
Attempting to add a link element afterwards would be an attempt to include an asset as part of the application after Trunk already did its job of copying and processing the expected assets, so it does not work. Instead, define all assets that you are going to need in your index.html, preferably in the head element, then you will be free to use them in your application by path (e.g. image/rust.png).
What you should do is make the path relative. Say this is your directory structure:
/home/me/code/my-yew-test
├── Cargo.lock
├── Cargo.toml
├── index.html
├── img
│ └── rust.png
├── README.md
└── src
└── main.rs
In the index.html file you should add a relative folder/file path to the resource you want compied. For copying the whole folder and using the image in main.rs:
<!--in index.html-->
<link data-trunk rel="copy-dir" href="./img"/>
// in main.rs
html!{
<img src="img/rust.png" alt="rust image"/>
}
My project as this kind of structure :
├── api
├── db
│ └── images
├── ui
│ └── public
│ └── src
│ | └── App.js
My app was created using create-react-app so I can't import files outside of src directory, and I do not want these images to be in the public folder : how can I have an img tag :
<img src="db/images/img_1.jpg">
with src getting images on db/images folder, completely outside of react app ?
Thank you for your replies
Another option is to put the image inside of your src and reference it in a react fashion. Consider the following:
├── ui
│ └── public
│ └── src
│ | └── App.js
└── img_1.jpg
app.js
import img from "./img_1.jpg";
then in your render img tag
<img src={img} />
Hoping this might work for you? iirc this will prevent someone from hotloading the image from your public folder.
If there's literally 0 way of moving the images into your react project, the only way I can think is to upload the images somewhere and reference them from a literal link, such as S3
If you just don't want it to reload when you upload a file, you can ignore the folder the files are uploaded to in you webpack config
devServer: {
...
watchOptions: {
ignored: './src/images/**/.*',
},
...
}
The create-react-app package uses a plugin for Webpack called ModuleScopePlugin that causes this behavior
You can use the package customize-cra for override the webpack configs.
The customize-cra has a method to resolve your problem.
removeModuleScopePlugin
or you can eject from create-react-app and remove this config manually at webpack
I am just providing a piece of code here. When i run the whole code its showing Index.html file is not found.
app = Flask(__name__)
CORS(app)
app.url_map.converters['everything'] = EverythingConverter
def render(duplicates, current, total):
env = Environment(loader=FileSystemLoader('template'))
template = env.get_template('index.html')
return template.render(duplicates=duplicates,
current=current,
total=total)
the error is
raise TemplateNotFound(template)
jinja2.exceptions.TemplateNotFound: index.html
My file path is
/My_project
template
/index.html
my_project.py
I ran the program so many times but its writes the same error. Does anyone had some idea?
thanks in advance
According to the Flask documentation your project layout should look something like this:
my_project/
│
├── templates/
│ └── base.html
│
├── static/
│ └── style.css
│
└── app.py
The directory in which you store your templates should be named:
templates/
Instead of:
template/
Don't forget to change references to this directory as well.
I have the following organization to my project but am unable to access the related CSS and JavaScript files from within my HTML code, unless I create symbolic links from the file to my web root.
Is this normal behavior for Apache or does the problem lie elsewhere?
If I remove the symbolic links and correct the path in my src attributes the content of those outside files becomes inaccessible.
userName#hostName:/var/www/test$ tree
.
├── css
│ └── style.css
├── html
│ ├── code.js -> ../js/code.js
│ ├── index.html
│ ├── jquery-3.2.1.js -> ../libs/jquery-3.2.1.js
│ └── style.css -> ../css/style.css
├── js
│ └── code.js
└── libs
└── jquery-3.2.1.js
4 directories, 7 files
userName#hostName:/var/www/test$ less html/index.html
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Test</title>
</head><!-- head -->
<body>
<h1>LOCAL TESTING SITE..</h1>
</body><!-- body -->
<script src="./code.js"></script>
</html><!-- html -->
html/index.html (END)
^ Works
userName#hostName:/var/www/test$ tree
.
├── css
│ └── style.css
├── html
│ ├── index.html
├── js
│ └── code.js
└── libs
└── jquery-3.2.1.js
4 directories, 4 files
userName#hostName:/var/www/test$ less html/index.html
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<title>Test</title>
</head><!-- head -->
<body>
<h1>LOCAL TESTING SITE..</h1>
</body><!-- body -->
<script src="../js/code.js"></script>
</html><!-- html -->
html/index.html (END)
^ Does NOT Work
userName#hostName:/var/www/test$ tree -p
.
├── [drwxrwxr-x] css
│ └── [-rw-rw-r--] style.css
├── [drwxrwxr-x] html
│ ├── [lrwxrwxrwx] code.js -> ../js/code.js
│ ├── [-rw-rw-r--] index.html
│ ├── [lrwxrwxrwx] jquery-3.2.1.js -> ../libs/jquery-3.2.1.js
│ └── [lrwxrwxrwx] style.css -> ../css/style.css
├── [drwxrwxr-x] js
│ └── [-rw-rw-r--] code.js
└── [drwxrwxr-x] libs
└── [-rw-rw-r--] jquery-3.2.1.js
4 directories, 7 files
^ Permissions on files
userName#hostName:/etc/apache2$ less sites-available/test.local.conf
<VirtualHost *:80>
ServerAdmin myEmail#email.com
DocumentRoot /var/www/test/html
ServerName test.local
ErrorLog ${APACHE_LOG_DIR}/test.local.error.log
CustomLog ${APACHE_LOG_DIR}/test.local.access.log combined
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
sites-available/test.local.conf (END)
^ Virtual Host Configuration
userName#hostName:/var/www/test$ uname -v
#35~16.04.1-Ubuntu
userName#hostName:/var/www/test$ apache2 -v
Server version: Apache/2.4.18 (Ubuntu)
^ System Info
Apache will not (by default) allow HTTP requests to access files outside (above) the root directory of the website for security reasons.
Your document root is set as: DocumentRoot /var/www/test/html, so all files (including non-HTML files) need to in this directory. Just because the directory is called html, don't be confused into thinking it should only contain HTML files.
Working directory structure
userName#hostName:/var/www/test/html$ tree
.
├── css
│ └── style.css
├── js
│ └── code.js
├── libs
│ └── jquery-3.2.1.js
└── index.html
3 directories, 4 files
userName#hostName:/var/www/test/html$ less index.html
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head><!-- head -->
<body>
<h1>LOCAL TESTING SITE..</h1>
</body><!-- body -->
<script src="js/code.js"></script>
</html><!-- html -->
index.html (END)
You'll see that all files are stored inside the /html directory or subdirectories of it. The HTML links to the JS and CSS files have been updated to refer to the correct file locations.
If Apache allowed files outside (above) the root directory to be accessed, you would run into major security issues.
For example, imagine if someone had a HTML file that did the following:
<!doctype HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
link to secret config file
</body>
</html>
This would allow users to gain access to any random file they wanted on the server.
In Cloud9 Express IDE example I see in folder/file routes/users.js - please tell me why this is in separate file -what is the intention of users.js as a distinct file? :
/*
GET users listing.
*/
exports.list = function(req, res){
res.send("respond with a resource");
};
ok Im trying to answer that one myself (feel free to chime in):
The basic Express set up folder structure according to Expressjs.com looks like this:
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
It is suggested and not obligatory. However for noobs like me this helpful website says:
If you are getting started with Express it is recommended that you use the structure from the generator.
Edited:
In the particular folder structure generated in Cloud9 Express the file /routes/users IS intrinsic to a typical Express-Jade setup.
Basic routing tutorial here answers what each of these files is doing