- actix-web static files as resources support - Legal - Features - Usage - Use-case 1: Static resources folder - Use-case 2: package.json - npm managed folder - Use-case 3: package.json - WebPack usage - Use-case 4: yarn package manager - Use-case 5: Angular-like applications
Dual-licensed under MIT or the UNLICENSE.
actix-webnpm run commands (such as webpack)Create folder with static resources in your project (for example static):
bash
cd project_dir
mkdir static
echo "<p>Hello, world\!</p>" > static/index.html
Add to Cargo.toml dependencies related to actix-web-static-files:
```toml [dependencies] actix-web = "4.0" actix-web-static-files = "4.0" static-files = "0.2.1"
[build-dependencies] static-files = "0.2.1" ```
Add build.rs with call to bundle resources:
```rust use staticfiles::resourcedir;
fn main() -> std::io::Result<()> { resource_dir("./static").build() } ```
Include generated code in src/main.rs:
```rust use actixweb::{App, HttpServer}; use actixwebstaticfiles::ResourceFiles;
include!(concat!(env!("OUT_DIR"), "/generated.rs"));
async fn main() -> std::io::Result<()> { HttpServer::new(move || { let generated = generate(); App::new().service(ResourceFiles::new("/", generated)) }) .bind("127.0.0.1:8080")? .run() .await } ```
Run the server:
bash
cargo run
Request the resource:
```bash $ curl -v http://localhost:8080/ * Trying ::1... * TCPNODELAY set * Connection failed * connect to ::1 port 8080 failed: Connection refused * Trying 127.0.0.1... * TCPNODELAY set * Connected to localhost (127.0.0.1) port 8080 (#0)
GET / HTTP/1.1 Host: localhost:8080 User-Agent: curl/7.64.1
< HTTP/1.1 200 OK < content-length: 20 < content-type: text/html < etag: "14:606a2226" < date: Sun, 23 May 2021 19:46:42 GMT < * Connection #0 to host localhost left intact
Hello, world!
* Closing connection 0 ```
See also:
Create folder with static resources in your project (for example static):
```bash cd projectdir mkdir staticpackages cd static_packages echo '{}' > package.json
npm install --save-dev @fortawesome/fontawesome-free ```
Add generated folder to ignore file of your version control system (here: git):
bash
cd project_dir
echo "static_packages/node_modules" >> .gitignore
Add dependencies and build-dependencies in Cargo.toml same way as in the first use-case.
Add build.rs with call to bundle resources:
```rust use staticfiles::npmresource_dir;
fn main() -> std::io::Result<()> { npmresourcedir("./static_packages")?.build() } ```
Include generated code in main.rs same way as in the first use-case.
Reference resources in your HTML (static/index.html):
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/static/@fortawesome/fontawesome-free/css/all.css">
<script defer src="/static/@fortawesome/fontawesome-free/js/all.js"></script>
<title>Hi</title>
</head>
<body>
<i class="fas fa-thumbs-up"></i>
</body>
</html>
Create folder with static resources in your project (for example web), install required packages and webpack:
```bash cd projectdir mkdir -p web/src cd web echo -e "nodemodules\ndist" > .gitignore echo '{}' > package.json
npm install --save lodash
npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin --save-dev ```
Add web/webpack.config.js:
```js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: './src/index.js', plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'actix-web-static-files WebPack', }), ], output: { filename: 'main.js', path: path.resolve(__dirname, 'dist', 'bundle'), }, }; ```
Add web/src/index.js:
```js import _ from 'lodash';
function component() { const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element; }
document.body.appendChild(component()); ```
Modify web/package.json by adding "scripts" sections:
json
{
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^5.2.0",
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0"
},
"scripts": {
"build": "webpack"
}
}
Add to Cargo.toml dependency to actix-web-static-files as in the first use case.
Add build.rs with call to bundle resources:
```rust use static_files::NpmBuild;
fn main() -> std::io::Result<()> { NpmBuild::new("web") .install()? .run("build")? .target("web/dist/bundle") .changedetection() .toresource_dir() .build() } ```
Include generated code in src/main.rs:
```rust use actixweb::{App, HttpServer}; use actixwebstaticfiles;
include!(concat!(env!("OUT_DIR"), "/generated.rs"));
async fn main() -> std::io::Result<()> { HttpServer::new(move || { let generated = generate(); App::new().service(actixwebstatic_files::ResourceFiles::new("/", generated)) }) .bind("127.0.0.1:8080")? .run() .await } ```
Run the server:
bash
cargo run
Request the resource:
```bash $ curl -v http://localhost:8080 * Trying ::1... * TCPNODELAY set * Connection failed * connect to ::1 port 8080 failed: Connection refused * Trying 127.0.0.1... * TCPNODELAY set * Connected to localhost (127.0.0.1) port 8080 (#0)
GET / HTTP/1.1 Host: localhost:8080 User-Agent: curl/7.64.1
< HTTP/1.1 200 OK < content-length: 199 < content-type: text/html < etag: "c7:5e403845" < date: Sun, 09 Feb 2020 16:51:45 GMT <
actix-web-static-files WebPack ```
See also:
We can use another package manager instead of npm. For example, to use yarn just add .executable("yarn") to NpmBuild call:
```rust use static_files::NpmBuild;
fn main() -> std::io::Result<()> { NpmBuild::new("web") .executable("yarn") .install()? .run("build")? .target("web/dist/bundle") .changedetection() .toresource_dir() .build() } ```
See also:
If you are using Angular as frontend, you may want to resolve all not found calls via index.html of frontend app. To do this just call method resolve_not_found_to_root after resource creation.
```rust use actix_web::{middleware::Logger, App, HttpServer};
use actixwebstatic_files;
use angularexamplefrontend::generate;
async fn main() -> std::io::Result<()> { envlogger::init(); HttpServer::new(move || { let mut app = App::new().wrap(Logger::default()); #[cfg(feature = "ui")] { let generated = generate(); app = app.service( actixwebstaticfiles::ResourceFiles::new("/", generated) .resolvenotfoundtoroot(), ); } app }) .bind("127.0.0.1:8080")? .run() .await } ```
Remember to place you static resource route after all other routes in this case.
You can check the complete example Angular Router Sample.