{/* container */}
+
+
{/* eof container */}
+ 
+ + { description } +
++ Don't worry, it takes less than 30 minutes to learn. +
+
+ Next.js is front-end solution only, focused on static websites. This is some
+ longer text so I can see how it behaves.
+
+ Maybe I should put here component so I have freedom in formatting, putting URLs, etc?
+ This is some test url
+
+ For anything not covered here, join + + our Discord + ! +
+
+
+)
+
+const Hero = () => {
+ const codeString =
+`app todoApp {
+ title: "ToDo App", /* visible in tab */
+
+ auth: { /* full-stack auth out-of-the-box */
+ userEntity: User,
+ externalAuthEntity: SocialLogin,
+ methods: {
+ usernameAndPassword: {},
+ google: {}
+ }
+ }
+}
+
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+ /* import your React code */
+ component: import Main from "@ext/Main.js"
+}`
+
+ return (
+ + Describe common features via Wasp DSL and write the rest in React, Node.js + and Prisma. +
+
+ 
+ 
+ 
+ + { description } +
+
+ Given .wasp and .js(x)/.css/..., source files,
+ Wasp compiler generates the full source of your web app in
+ the target stack - front-end, back-end and deployment.
+
+ + See what others are building with Wasp. +
+
+ })
+
+ })
+
+ })
+
+ })
+
+ })
+
When your DB is deployed correctly, you will be able to view it in the Fly.io dashboard:
+
+ })
+ }/)
+ }/)
+ })
+
+P.S: If you decided to build an app on your own - we'd love to see it! If it's simple enough, let's turn it into a tutorial! Please check our [contribution guide](contributing) for detailed instructions and reach us on Discord.
diff --git a/web/docs/tutorials/dev-excuses-app.md b/web/docs/tutorials/dev-excuses-app.md
new file mode 100644
index 000000000..c6263b0e9
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app.md
@@ -0,0 +1,25 @@
+---
+title: Introduction
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import DiscordLink from '../../blog/components/DiscordLink';
+
+:::info
+Make sure you've set up Wasp! Check out [Getting Started](/getting-started.md) first for installation instructions, and then continue with the tutorial. In case of any issues - please, ping us on })
\ No newline at end of file
diff --git a/web/docs/tutorials/dev-excuses-app/01-creating-the-project.md b/web/docs/tutorials/dev-excuses-app/01-creating-the-project.md
new file mode 100644
index 000000000..ac67ae1f8
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app/01-creating-the-project.md
@@ -0,0 +1,28 @@
+---
+id: 01-creating-the-project
+title: Creating the project
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+By now you've already learned [how to install Wasp and create a new project](/getting-started.md). So letβs create a new web app appropriately named `ItWaspsOnMyMachine`.
+
+```
+wasp new ItWaspsOnMyMachine
+```
+
+Changing the working directory:
+```
+cd ItWaspsOnMyMachine
+```
+
+Starting the app:
+```
+wasp start
+```
+
+Now your default browser should open up with a simple predefined text message. Thatβs it! π₯³ For now β the codebase consists of only two files! `main.wasp` is the config file that defines the applicationβs functionality. And `MainPage.js` is the front-end. You can delete `Main.css`, we won't use that. And don't forget to remove `import './Main.css'` from `MainPage.js` file.
+
+})
\ No newline at end of file
diff --git a/web/docs/tutorials/dev-excuses-app/02-modifying-main-wasp-file.md b/web/docs/tutorials/dev-excuses-app/02-modifying-main-wasp-file.md
new file mode 100644
index 000000000..a7fe93871
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app/02-modifying-main-wasp-file.md
@@ -0,0 +1,103 @@
+---
+id: 02-modifying-main-wasp-file
+title: Modifying main.wasp file
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+First and foremost, we need to add some dependencies and introduce operations to our project. Weβll add Tailwind to make our UI prettier and Axios for making API requests.
+
+Also, weβll declare a database entity called `Excuse`, queries, and action. The `Excuse` entity consists of the entityβs ID and the text.
+
+`Queries` are here when we need to fetch/read something, while `actions` are here when we need to change/update data. Both query and action declaration consists of two lines β a reference to the file that contains implementation and a data model to operate on. You can find more info [in the docs section below](/docs/language/features#queries-and-actions-aka-operations). Let's move on!
+
+Let's add the following code to the `main.wasp` file's `app` section:
+
+```js title="main.wasp | Adding dependencies"
+ head: [
+ ""
+ ],
+
+ dependencies: [
+ ("axios", "^0.21.1")
+ ]
+```
+
+Next, we'll add an Excuse entity to the bottom of the file. You'll also need to define queries and an action that operates on nit.
+
+```js title="main.wasp | Defining Excuse entity, queries and action"
+entity Excuse {=psl
+ id Int @id @default(autoincrement())
+ text String
+psl=}
+
+query getExcuse {
+ fn: import { getExcuse } from "@ext/queries.js",
+ entities: [Excuse]
+}
+
+query getAllSavedExcuses {
+ fn: import { getAllSavedExcuses } from "@ext/queries.js",
+ entities: [Excuse]
+}
+
+action saveExcuse {
+ fn: import { saveExcuse } from "@ext/actions.js",
+ entities: [Excuse]
+}
+```
+The resulting `main.wasp` file should look like this:
+
+```js title="main.wasp | Final result"
+
+// Main declaration, defines a new web app.
+app ItWaspsOnMyMachine {
+
+ // Used as a browser tab title.
+ title: "It Wasps On My Machine",
+
+ head: [
+ // Adding Tailwind to make our UI prettier
+ ""
+ ],
+
+ dependencies: [
+ // Adding Axios for making HTTP requests
+ ("axios", "^0.21.1")
+ ]
+}
+
+// Render page MainPage on url `/` (default url).
+route RootRoute { path: "/", to: MainPage }
+
+// ReactJS implementation of our page located in `ext/MainPage.js` as a default export
+page MainPage {
+ component: import Main from "@ext/MainPage.js"
+}
+
+// Prisma database entity
+entity Excuse {=psl
+ id Int @id @default(autoincrement())
+ text String
+psl=}
+
+// Query declaration to get a new excuse
+query getExcuse {
+ fn: import { getExcuse } from "@ext/queries.js",
+ entities: [Excuse]
+}
+
+// Query declaration to get all excuses
+query getAllSavedExcuses {
+ fn: import { getAllSavedExcuses } from "@ext/queries.js",
+ entities: [Excuse]
+}
+
+// Action to save current excuse
+action saveExcuse {
+ fn: import { saveExcuse } from "@ext/actions.js",
+ entities: [Excuse]
+}
+```
+
+Perfect! We've set up all the architecture of our app. Now let's add some logic.
diff --git a/web/docs/tutorials/dev-excuses-app/03-adding-operations.md b/web/docs/tutorials/dev-excuses-app/03-adding-operations.md
new file mode 100644
index 000000000..cba4300f0
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app/03-adding-operations.md
@@ -0,0 +1,35 @@
+---
+id: 03-adding-operations
+title: Adding operations
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Now you'll need to create two files: `actions.js` and `queries.js` in the `ext` folder.
+
+Letβs add `saveExcuse()` action to our `actions.js` file. This action will save the text of our excuse to the database.
+
+```js title=".../ext/actions.js | Defining an action"
+export const saveExcuse = async (excuse, context) => {
+ return context.entities.Excuse.create({
+ data: { text: excuse.text }
+ })
+}
+```
+
+Then we need to create two queries in the `queries.js` file. First, one `getExcuse` will call an external API and fetch a new excuse. The second one, named `getAllSavedExcuses`, will pull all the excuses weβve saved to our database.
+
+```js title=".../ext/queries.js | Defining queries"
+import axios from 'axios';
+
+export const getExcuse = async () => {
+ const response = await axios.get('https://api.devexcus.es/')
+ return response.data
+}
+
+export const getAllSavedExcuses = async (_args, context) => {
+ return context.entities.Excuse.findMany()
+}
+```
+
+Thatβs it! We finished our back-end. π Now, letβs use those queries/actions on our UI.
diff --git a/web/docs/tutorials/dev-excuses-app/04-updating-main-page-js-file.md b/web/docs/tutorials/dev-excuses-app/04-updating-main-page-js-file.md
new file mode 100644
index 000000000..a216a66cd
--- /dev/null
+++ b/web/docs/tutorials/dev-excuses-app/04-updating-main-page-js-file.md
@@ -0,0 +1,74 @@
+---
+id: 04-updating-main-page-js-file
+title: Updating MainPage.js file
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+This is the most complex part, but it really comes down to mostly writing React. To make our life easier - letβs erase everything we had in the `MainPage.js` file and substitute it with our new UI markup.
+
+```js title=".../ext/MainPage.js | Updating the UI"
+import React, { useState } from 'react'
+import { useQuery } from '@wasp/queries'
+import getExcuse from '@wasp/queries/getExcuse'
+import getAllSavedExcuses from '@wasp/queries/getAllSavedExcuses'
+import saveExcuse from '@wasp/actions/saveExcuse'
+
+const MainPage = () => {
+ const [currentExcuse, setCurrentExcuse] = useState({ text: "" })
+ const { data: excuses } = useQuery(getAllSavedExcuses)
+
+ const handleGetExcuse = async () => {
+ try {
+ setCurrentExcuse(await getExcuse())
+ } catch (err) {
+ window.alert('Error while getting the excuse: ' + err.message)
+ }
+ }
+
+ const handleSaveExcuse = async () => {
+ if (currentExcuse.text) {
+ try {
+ await saveExcuse(currentExcuse)
+ } catch (err) {
+ window.alert('Error while saving the excuse: ' + err.message)
+ }
+ }
+ }
+
+ return (
+ })
+
+Now you can click the βGet excuseβ button to receive an excuse. You should also be able to save the ones you like with the βSave excuseβ button. Our final project should look like this:
+
+})
+
+Now we can think of some additional improvements. For example:
+
+- Add a unique constraint to Entityβs ID so we wonβt be able to save duplicated excuses.
+- Add exceptions and edge cases handling.
+- Make the markup prettier.
+- Optimize and polish the code
+
+So, weβve been able to build a full-stack application with a database and external API call in a couple of minutes. And now we have a box full of excuses for all our development needs.
+
+})
+
+
+P.S: now you're familiar with Wasp and can build full-stack apps, horaay! π How did it go? Was it fun? Drop us a message at our + { description } +
++ Don't worry, it takes less than 30 minutes to learn. +
+
+ TL;DR - These are frontend-first frameworks, with some limited backend capabilities.
+ Wasp is a full-stack framework.
+
+ The main difference between Wasp and the solutions listed above is that Wasp is a trully full-stack
+ framework, meaning it brings both back-end and database next to front-end. You can think of it as
+ Ruby on Rails, but made for JS (React & Node.js) and full-stack.
+
+ Next.js, Gatsby and others started out as frontend frameworks for static sites. Although some of them
+ now offer an option to use serverless functions, you still have to bring your own database and you'll
+ also need some kind of a server/backend if you'll need to run more complex operations.
+
+ TL;DR - These are backend frameworks, while Wasp covers full-stack, which makes it easier to sync and
+ reuse data models across the stack.
+
+ Back in the day when the whole UI was server-side rendered, Rails and Django were actually full-stack
+ frameworks. But, with the advent of SPAs and frontend frameworks such as React, they are today mostly
+ used as API servers, aka backend frameworks.
+
+ Wasp is a full-stack framework, which means it covers both frontend, backend and database at the same
+ time. That allows us to make it super easy to work with and sync data models across the entire
+ stack. You don't even have to define and deal with any kind of CRUD API - Wasp will do that for
+ you under the hood.
+
+ We measured! It takes about 30 minutes to get going, and
+ most users find it pretty straight-forward.
+ Since the majority of your coding will still be done in the tools you're familiar with (currently
+ React & Node.js), it's really a marginal change to what you're used to.
+
+ The reason is for that is that Wasp is a really simple configuration language, without any
+ loops or variables - you can think of it as of a JSON that is easier to read and is a bit smarter.
+
+ Still, although simple (and we plan to keep it that way), it's a real language so you get all the
+ IDE goodies with it - syntax highlighting, auto-completion, live error reporting, ...
+
+ Yes, that is currently the supported stack. But, Wasp is being developed as a language/framework and
+ architecture-agnostic tool, so we plan to add support for more languages and frameworks in the future.
+
+ This is something we're pretty excited about and think could be potentially be a unique opportunity
+ due to the language approach we're taking with Wasp.
+
+ For anything not covered here, join + + our Discord + ! +
+
+
+
+ Wasp
+
+
+
+)
+
+const Hero = () => {
+ const codeString =
+`app todoApp {
+ title: "ToDo App", /* visible in tab */
+
+ auth: { /* full-stack auth out-of-the-box */
+ userEntity: User,
+ externalAuthEntity: SocialLogin,
+ methods: {
+ usernameAndPassword: {},
+ google: {}
+ }
+ }
+}
+
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+ /* import your React code */
+ component: import Main from "@ext/Main.js"
+}`
+
+ return (
+ + Describe common features via Wasp DSL and write the rest in React, Node.js + and Prisma. +
+
+ 
+ 
+ 
+ + { description } +
+
+ Given .wasp and .js(x)/.css/..., source files,
+ Wasp compiler generates the full source of your web app in
+ the target stack - front-end, back-end and deployment.
+
+
+
+
+ Wasp Ξ²eta
+
+ + Be the first to know when we ship new features and updates! +
++ See what others are building with Wasp. +
+js/html/css... when you require more control.
-
- ),
- },
- {
- title: 'No lock-in',
- //imageUrl: 'img/undraw_docusaurus_react.svg',
- description: (
- <>
- If Wasp becomes too limiting for you, simply eject and continue with the human-readable
- source code following industry best-practices.
-
- ),
- },
-];
+import Nav from '../components/Nav/index'
+import Hero from '../components/Hero'
+import Benefits from '../components/Benefits'
+import HowItWorks from '../components/HowItWorks'
+import ShowcaseGallery from '../components/ShowcaseGallery'
+import Newsletter from '../components/Newsletter'
+import Faq from '../components/Faq'
+import Footer from '../components/Footer'
-function Feature({imageUrl, title, description}) {
- const imgUrl = useBaseUrl(imageUrl);
+import styles from './styles.module.css'
+import './index.css'
+import './preflight.css'
+
+
+const Background = () => {
return (
- 
- {description}
-
-
-
- )
-}
-
-function HeroCodeExample() {
- // NOTE: There is an image in static/img/hero-code-shot.png of this code,
- // used as the main image of the web app (specified via ) when being
- // parsed by external sites (Facebook, Twitter, Reddit, ...).
- // Therefore, if this example changes, you should also update that image
- // (just take a screenshot).
-
- const createAppWaspCode =
-`app todoApp {
- title: "ToDo App", /* visible in tab */
-
- auth: { /* full-stack auth out-of-the-box */
- userEntity: User,
- externalAuthEntity: SocialLogin,
- methods: {
- usernameAndPassword: {},
- google: {}
- }
- }
-}
-
-route RootRoute { path: "/", to: MainPage }
-page MainPage {
- /* import your React code */
- component: import Main from "@client/Main.js"
-}
-`
- return (
- wasp start and check it out
- at http://localhost:3000!
- 
-
- )
-}
+ - Join our mailing list and be the first to know when we ship new features - and updates! -
- -- Also, make sure to check - out Wasp repo - on Github and express your support by - giving us a star! -
- -
- backed by Y Combinator
- 
- 
- 
- curl -sSL https://get.wasp-lang.dev/installer.sh | sh
- curl -sSL https://get.wasp-lang.dev/installer.sh | sh
- wasp new MyFirstApp
- cd MyFirstApp && wasp start
- 
,
- Node.js 
,
- Prisma 
,
- ...)
-
-
- without writing boilerplate.
- Frontend, backend and deployment - all unified with one concise language.
-Zero configuration, all best practices.
- -
- Given .wasp + .js, .css, ... files as an input, Wasp compiler behind the scene
- generates the full
- source code of your web app - front-end, back-end and deployment.
-
-
- Wasp aims to be at least as flexible as the traditional web frameworks like Ruby on Rails.
-
- Start your project quickly with the best defaults and customize and scale it as it grows.
-
As an example, we used Wasp to implement a copy of Medium:
- -
-
- - Concepts such as app, page, route, auth - etc. are baked into Wasp, providing the - higher level of expressiveness. -
- -- Take the Todo App tutorial and build a full-fledged Todo app in Wasp! -
- -})
-