Configuration
You can customize your hosting environment to fit your needs, including:
- Specify which
source
files in your local project directory you want to deploy? Learn how. - Ignore some files during deployment. Learn how.
- Configure HTTP
headers
to pass along additional information about a request or a response. Learn how. - Serve a customized 404 page. Learn how.
- Set up
redirects
for pages that you've moved or deleted. Learn how. - Set up
rewrites
. Learn how. - Tweak
gzip
compression for best performance. Learn how. - Customize the
encoding
behavior of your files. Learn how. - Allow your project to be embedded as an
iframe
. Learn how. - Customize
assertions
to modify the default verification behavior of the CLI. Learn how.
Where do you define your Hosting configuration?
Your hosting configuration is defined in the Juno configuration file, which is automatically created when you run juno init or juno deploy for the first time.
How do you apply your changes?
To apply any changes, execute the juno config command with the CLI.
Options
The list below outlines the available hosting options you can configure to tailor your hosting.
Source
The source
field specifies the directory that contains the built assets for your satellite. This is typically the output directory generated by your build process after running a command like npm run build
.
Commonly, or if you are using the templates, these are the folders that can be set as the source
field:
Framework | Source |
---|---|
Next.js | out |
React, Astro, or Vue | dist |
SvelteKit | build |
Angular | dist/<your-project-name>/browser |
Juno uses this directory to locate the files that will be deployed as part of your satellite. Ensure that this directory includes all the necessary assets, such as HTML, JavaScript, CSS, and any other static or dynamic resources your application requires.
import { defineConfig } from "@junobuild/config";
export default defineConfig({
satellite: {
id: "qsgjb-riaaa-aaaaa-aaaga-cai",
source: "dist"
}
});
Ignore files
The ignore
attribute allows you to exclude certain files from being deployed to your satellite.
This attribute works similarly to Git's .gitignore
, and you can specify which files to ignore using globs.
Here is an example of how the ignore attribute can be utilized:
import { defineConfig } from "@junobuild/config";
export default defineConfig({
satellite: {
id: "qsgjb-riaaa-aaaaa-aaaga-cai",
source: "dist",
ignore: ["**/*.txt", ".tmp/"]
}
});
HTTP Headers
Headers allow the client and the satellite to pass additional information along with a request or a response. Some sets of headers can affect how the browser handles the page and its content.
For instance, you may want to set a specific Cache-Control
for performance reasons.
Here's an example of the headers
object:
import { defineConfig } from "@junobuild/config";
export default defineConfig({
satellite: {
id: "qsgjb-riaaa-aaaaa-aaaga-cai",
source: "dist",
storage: {
headers: [
{
source: "/",
headers: [["Cache-Control", "public,max-age=0,must-revalidate"]]
},
{
source: "assets/fonts/*",
headers: [["Cache-Control", "max-age=31536000"]]
},
{
source: "**/*.jpg",
headers: [
["Cache-Control", "max-age=31536000"],
["Access-Control-Allow-Origin", "*"]
]
}
]
}
}
});
This source
attribute works similarly to Git's .gitignore
, and you can specify which files match the headers using globs.
The headers
is an array of objects, each containing key
and value
, and these apply to the matching paths.
- The
Content-Type
header is calculated automatically and cannot be altered. - No validation or check for uniqueness is performed. For example, if a header matches a file based on multiple rules, multiple headers will be set.
- Likewise, if you provide the same header when you upload file to your "Storage" and within the configuration, both headers will be set in the response.