60233dcbcc
Co-authored-by: Mihovil Ilakovac <mihovil@ilakovac.com> Co-authored-by: Martin Šošić <Martinsos@users.noreply.github.com> Co-authored-by: Filip Sodić <filip.sodic@gmail.com> Co-authored-by: Filip Sodić <filip.sodic@fer.hr>
3.7 KiB
| title |
|---|
| Customizing the App |
import { Required } from '@site/src/components/Required';
Each Wasp project can have only one app type declaration. It is used to configure your app and its components.
app todoApp {
wasp: {
version: "^0.11.1"
},
title: "ToDo App",
head: [
"<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" />"
]
}
We'll go through some common customizations you might want to do to your app. For more details on each of the fields, check out the API Reference.
Changing the App Title
You may want to change the title of your app, which appears in the browser tab, next to the favicon. You can change it by changing the title field of your app declaration:
app myApp {
wasp: {
version: "^0.11.1"
},
title: "BookFace"
}
Adding Additional Lines to the Head
If you are looking to add additional style sheets or scripts to your app, you can do so by adding them to the head field of your app declaration.
An example of adding extra style sheets and scripts:
app myApp {
wasp: {
version: "^0.11.1"
},
title: "My App",
head: [ // optional
"<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" />",
"<script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js\"></script>",
"<meta name=\"viewport\" content=\"minimum-scale=1, initial-scale=1, width=device-width\" />"
]
}
API Reference
app todoApp {
wasp: {
version: "^0.11.1"
},
title: "ToDo App",
head: [
"<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" />"
],
auth: {
// ...
},
client: {
// ...
},
server: {
// ...
},
db: {
// ...
},
dependencies: [
// ...
],
emailSender: {
// ...
},
webSocket: {
// ...
}
}
The app declaration has the following fields:
-
wasp: dictWasp compiler configuration. It is a dictionary with a single field:-
version: stringThe version specifies which versions of Wasp are compatible with the app. It should contain a valid SemVer range
:::info For now, the version field only supports caret ranges (i.e.,
^x.y.z). Support for the full specification will come in a future version of Wasp :::
-
-
title: stringTitle of your app. It will appear in the browser tab, next to the favicon.
-
head: [string]List of additional lines (e.g.
<link>or<script>tags) to be included in the<head>of your HTML document.
The rest of the fields are covered in dedicated sections of the docs:
-
auth: dictAuthentication configuration. Read more in the authentication section of the docs.
-
client: dictConfiguration for the client side of your app. Read more in the client configuration section of the docs.
-
server: dictConfiguration for the server side of your app. Read more in the server configuration section of the docs.
-
db: dictDatabase configuration. Read more in the database configuration section of the docs.
-
dependencies: [(string, string)]List of npm dependencies for your app. Read more in the dependencies section of the docs.
-
emailSender: dictEmail sender configuration. Read more in the email sending section of the docs.
-
webSocket: dictWebSocket configuration. Read more in the WebSocket section of the docs.