Streaming Demo
++ {response} +
+diff --git a/.gitattributes b/.gitattributes
index f20d133b8..4f2bee7e2 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,3 +1,5 @@
*.wasp linguist-language=JavaScript
+*.hs linguist-detectable=false
+
/examples/* linguist-documentation
diff --git a/.github/workflows/ci.yaml b/.github/workflows/waspc-ci.yaml
similarity index 98%
rename from .github/workflows/ci.yaml
rename to .github/workflows/waspc-ci.yaml
index 9f6887ea9..878523428 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/waspc-ci.yaml
@@ -1,11 +1,15 @@
-name: CI
+name: WASPC-CI
on:
push:
+ paths:
+ - "waspc/**"
branches:
- main
- release
- pull_request: { }
+ pull_request:
+ paths:
+ - "waspc/**"
create: { tags: [v*] }
schedule:
# Additionally run once per week (At 00:00 on Sunday) to avoid loosing cache
diff --git a/README.md b/README.md
index 75115c94a..e0cb9542d 100644
--- a/README.md
+++ b/README.md
@@ -19,13 +19,13 @@
-Wasp (**W**eb **A**pplication **Sp**ecification) is a Rails-like framework for React, Node.js and Prisma.
+Wasp (**W**eb **A**pplication **Sp**ecification) is a Rails-like framework for React, Node.js, and Prisma.
Build your app in a day and deploy it with a single CLI command!
### Why is Wasp awesome
- 🚀 **Quick start**: Due to its expressiveness, you can create and deploy a production-ready web app from scratch with very few lines of concise, consistent, declarative code.
- 😌 **No boilerplate**: By abstracting away complex full-stack features, there is less boilerplate code. That means less code to maintain and understand! It also means easier upgrades.
-- 🔓 **No lock-in**: You can deploy Wasp app anywhere you like. There is no lock-in into specific providers, you have full control over the code (and can actually check it out in .wasp/ dir if you are interested ).
+- 🔓 **No lock-in**: You can deploy the Wasp app anywhere you like. There is no lock-in into specific providers; you have full control over the code (and can actually check it out in .wasp/ dir if you are interested ).
### Features
🔒 Full-stack Auth, 🖇️ RPC (Client <-> Server), 🚀 Simple Deployment, ⚙ ️Jobs, ✉️ Email Sending, 🛟 Full-stack Type Safety, ...
@@ -46,7 +46,7 @@ app todoApp {
route RootRoute { path: "/", to: MainPage }
page MainPage {
- authRequired: true, // Limit access to logged in users.
+ authRequired: true, // Limit access to logged-in users.
component: import Main from "@client/Main.tsx" // Your React code.
}
@@ -72,7 +72,7 @@ The rest of the code you write in React / Node.js / Prisma and just reference it
Given a simple .wasp configuration file that describes the high-level details of your web app, and .js(x)/.css/..., source files with your unique logic, Wasp compiler generates the full source of your web app in the target stack: front-end, back-end and deployment.
-This unique approach is what makes Wasp "smart" and gives it its super powers!
+This unique approach is what makes Wasp "smart" and gives it its superpowers!
For more information about Wasp, check [**docs**](https://wasp-lang.dev/docs).
@@ -84,7 +84,7 @@ curl -sSL https://get.wasp-lang.dev/installer.sh | sh
```
to install Wasp on OSX/Linux/WSL(Win). From there, just follow the instructions to run your first app in less than a minute!
-For more details check out [the docs](https://wasp-lang.dev/docs).
+For more details, check out [the docs](https://wasp-lang.dev/docs).
# This repository
@@ -95,15 +95,15 @@ This is the main repo of the Wasp universe, containing core code (mostly `waspc`
Currently, Wasp is in beta, with most features flushed out and working well.
However, there are still a lot of improvements and additions that we have in mind for the future, and we are working on them constantly, so you can expect a lot of changes and improvements in the future.
-While the idea is to support multiple web tech stacks in the future, right now we are focusing on the specific stack: React + react-query, NodeJS + ExpressJS, Prisma.
+While the idea is to support multiple web tech stacks in the future, right now, we are focusing on the specific stack: React + react-query, NodeJS + ExpressJS, and Prisma.
# Contributing
Any way you want to contribute is a good way :)!
-The best place to start is to check out [waspc/](waspc/), where you can find detailed steps for the first time contributors + technical details about the Wasp compiler.
+The best place to start is to check out [waspc/](waspc/), where you can find detailed steps for first-time contributors + technical details about the Wasp compiler.
-Core of Wasp is built in Haskell, but there is also a lot of non-Haskell parts of Wasp, so you will certainly be able to find something for you!
+The core of Wasp is built in Haskell, but there are also a lot of non-Haskell parts of Wasp, so you will certainly be able to find something for you!
Even if you don't plan to submit any code, just joining the discussion on discord [![Discord](https://img.shields.io/discord/686873244791210014?label=chat%20on%20discord)](https://discord.gg/rzdnErX) and giving your feedback is already great and helps a lot (motivates us and helps us figure out how to shape Wasp)!
@@ -118,4 +118,12 @@ Check our [careers](https://wasp-lang.notion.site/Wasp-Careers-59fd1682c80d446f9
# Sponsors
- - Our first sponsor ever! Thanks so much Michel ❤️ , from the whole Wasp Team, for bravely going where nobody has been before :)!
+
- Our first sponsor ever! Thanks so much, Michel ❤️ , from the whole Wasp Team, for bravely going where nobody has been before :)!
+
+
- Thanks Shayne, for all the contributions you did so far and for your continuous support!
+
+
- Big thanks Mariano for being one of our first sponsors and believing in us ❤️!
+
+
- Thanks Mike ❤️ for supporting us so early on our journey!
+
+
- We are thankful for your support Heaven in this early stage of Wasp :)!
diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 000000000..caa86ce7d
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,37 @@
+Example Wasp apps
+=================
+
+Here's a list of all officially maintained Wasp example apps!
+Most of these apps are relatively small, and each one demonstrates several of Wasp's interesting features.
+
+The **tutorials** directory contains [Wasp tutorial](https://wasp-lang.dev/docs/tutorial/create) apps.
+
+1. **todo-typescript**
+ - A simple task-tracking app implemented in TypeScript.
+ - Demonstrates: **full-stack type safety in Wasp via TypeScript**, [auth](https://wasp-lang.dev/docs/auth/overview), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview)
+
+2. **waspello**
+ - A simple Trello clone.
+ - Demonstrates: [auth](https://wasp-lang.dev/docs/auth/overview), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview)
+
+3. **hackaton-submissions**
+ - An app for organizing your own hackaton.
+ - Demonstrates: [tailwind](https://wasp-lang.dev/docs/project/css-frameworks#tailwind), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview)
+
+4. **waspleau**
+ - A simple clone of Tableau. The app regularly pulls in external data and shows it on a nice dashboard.
+ - Demonstrates: **[jobs](https://wasp-lang.dev/docs/advanced/jobs)**, analytics
+
+5. **thoughts**
+ - A simple note-taking app organized around the concept of hashtags.
+ - Demonstrates: [db seeding](https://wasp-lang.dev/docs/data-model/backends#seeding-the-database), [auth](https://wasp-lang.dev/docs/auth/overview), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview)
+
+6. **realworld**
+ - A Medium clone (https://github.com/gothinkster/realworld - the mother of all demo apps).
+ - Demonstrates: [auth](https://wasp-lang.dev/docs/auth/overview), [rpc](https://wasp-lang.dev/docs/data-model/operations/overview), [db seeding](https://wasp-lang.dev/docs/data-model/backends#seeding-the-database), Material UI
+
+7. **streaming**
+ - Demonstrates: **http streaming**, [api](https://wasp-lang.dev/docs/advanced/apis)
+
+8. **websockets-realtime-voting**
+ - Demonstrates: **[web sockets](https://wasp-lang.dev/docs/advanced/web-sockets)**, [auth](https://wasp-lang.dev/docs/auth/overview), voting system
diff --git a/examples/hackathon/.gitignore b/examples/hackathon-submissions/.gitignore
similarity index 100%
rename from examples/hackathon/.gitignore
rename to examples/hackathon-submissions/.gitignore
diff --git a/examples/hackathon/.wasproot b/examples/hackathon-submissions/.wasproot
similarity index 100%
rename from examples/hackathon/.wasproot
rename to examples/hackathon-submissions/.wasproot
diff --git a/examples/hackathon/README.md b/examples/hackathon-submissions/README.md
similarity index 100%
rename from examples/hackathon/README.md
rename to examples/hackathon-submissions/README.md
diff --git a/examples/hackathon/main.wasp b/examples/hackathon-submissions/main.wasp
similarity index 95%
rename from examples/hackathon/main.wasp
rename to examples/hackathon-submissions/main.wasp
index 198a0961d..0d74ec0f3 100644
--- a/examples/hackathon/main.wasp
+++ b/examples/hackathon-submissions/main.wasp
@@ -12,7 +12,7 @@ app hackathonBetaSubmissions {
}
entity Submission {=psl
- name String @id @unique
+ name String @id @unique
email String @unique
github String
description String
diff --git a/examples/hackathon/postcss.config.cjs b/examples/hackathon-submissions/postcss.config.cjs
similarity index 100%
rename from examples/hackathon/postcss.config.cjs
rename to examples/hackathon-submissions/postcss.config.cjs
diff --git a/examples/hackathon/src/.waspignore b/examples/hackathon-submissions/src/.waspignore
similarity index 100%
rename from examples/hackathon/src/.waspignore
rename to examples/hackathon-submissions/src/.waspignore
diff --git a/examples/hackathon/src/client/Main.css b/examples/hackathon-submissions/src/client/Main.css
similarity index 100%
rename from examples/hackathon/src/client/Main.css
rename to examples/hackathon-submissions/src/client/Main.css
diff --git a/examples/hackathon/src/client/MainPage.tsx b/examples/hackathon-submissions/src/client/MainPage.tsx
similarity index 100%
rename from examples/hackathon/src/client/MainPage.tsx
rename to examples/hackathon-submissions/src/client/MainPage.tsx
diff --git a/examples/hackathon/src/client/betathonLogo.png b/examples/hackathon-submissions/src/client/betathonLogo.png
similarity index 100%
rename from examples/hackathon/src/client/betathonLogo.png
rename to examples/hackathon-submissions/src/client/betathonLogo.png
diff --git a/examples/hackathon/src/client/components/Navbar.tsx b/examples/hackathon-submissions/src/client/components/Navbar.tsx
similarity index 100%
rename from examples/hackathon/src/client/components/Navbar.tsx
rename to examples/hackathon-submissions/src/client/components/Navbar.tsx
diff --git a/examples/hackathon/src/client/components/Projects.tsx b/examples/hackathon-submissions/src/client/components/Projects.tsx
similarity index 100%
rename from examples/hackathon/src/client/components/Projects.tsx
rename to examples/hackathon-submissions/src/client/components/Projects.tsx
diff --git a/examples/hackathon/src/client/components/SubmissionForm.tsx b/examples/hackathon-submissions/src/client/components/SubmissionForm.tsx
similarity index 100%
rename from examples/hackathon/src/client/components/SubmissionForm.tsx
rename to examples/hackathon-submissions/src/client/components/SubmissionForm.tsx
diff --git a/examples/hackathon/src/client/tsconfig.json b/examples/hackathon-submissions/src/client/tsconfig.json
similarity index 100%
rename from examples/hackathon/src/client/tsconfig.json
rename to examples/hackathon-submissions/src/client/tsconfig.json
diff --git a/examples/hackathon/src/client/vite-env.d.ts b/examples/hackathon-submissions/src/client/vite-env.d.ts
similarity index 100%
rename from examples/hackathon/src/client/vite-env.d.ts
rename to examples/hackathon-submissions/src/client/vite-env.d.ts
diff --git a/examples/hackathon/src/client/waspLogo.png b/examples/hackathon-submissions/src/client/waspLogo.png
similarity index 100%
rename from examples/hackathon/src/client/waspLogo.png
rename to examples/hackathon-submissions/src/client/waspLogo.png
diff --git a/examples/hackathon/src/server/actions.js b/examples/hackathon-submissions/src/server/actions.js
similarity index 100%
rename from examples/hackathon/src/server/actions.js
rename to examples/hackathon-submissions/src/server/actions.js
diff --git a/examples/hackathon/src/server/queries.js b/examples/hackathon-submissions/src/server/queries.js
similarity index 100%
rename from examples/hackathon/src/server/queries.js
rename to examples/hackathon-submissions/src/server/queries.js
diff --git a/examples/hackathon/src/server/tsconfig.json b/examples/hackathon-submissions/src/server/tsconfig.json
similarity index 100%
rename from examples/hackathon/src/server/tsconfig.json
rename to examples/hackathon-submissions/src/server/tsconfig.json
diff --git a/examples/hackathon/src/shared/tsconfig.json b/examples/hackathon-submissions/src/shared/tsconfig.json
similarity index 100%
rename from examples/hackathon/src/shared/tsconfig.json
rename to examples/hackathon-submissions/src/shared/tsconfig.json
diff --git a/examples/hackathon/tailwind.config.cjs b/examples/hackathon-submissions/tailwind.config.cjs
similarity index 100%
rename from examples/hackathon/tailwind.config.cjs
rename to examples/hackathon-submissions/tailwind.config.cjs
diff --git a/examples/streaming/.gitignore b/examples/streaming/.gitignore
new file mode 100644
index 000000000..ad2da72f4
--- /dev/null
+++ b/examples/streaming/.gitignore
@@ -0,0 +1,11 @@
+/.wasp/
+
+# We ignore env files recognized and used by Wasp.
+.env.server
+.env.client
+
+# To be extra safe, we by default ignore any files with `.env` extension in them.
+# If this is too agressive for you, consider allowing specific files with `!` operator,
+# or modify/delete these two lines.
+*.env
+*.env.*
diff --git a/examples/tutorials/ItWaspsOnMyMachine/.wasproot b/examples/streaming/.wasproot
similarity index 100%
rename from examples/tutorials/ItWaspsOnMyMachine/.wasproot
rename to examples/streaming/.wasproot
diff --git a/examples/streaming/main.wasp b/examples/streaming/main.wasp
new file mode 100644
index 000000000..a2c87e63c
--- /dev/null
+++ b/examples/streaming/main.wasp
@@ -0,0 +1,21 @@
+app streaming {
+ wasp: {
+ version: "^0.11.5"
+ },
+ title: "streaming"
+}
+
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+ component: import Main from "@client/MainPage.jsx"
+}
+
+api streamingText {
+ httpRoute: (GET, "/api/streaming-test"),
+ fn: import { getText } from "@server/streaming.js",
+}
+
+apiNamespace defaultMiddleware {
+ path: "/api",
+ middlewareConfigFn: import { getMiddlewareConfig } from "@server/streaming.js",
+}
\ No newline at end of file
diff --git a/examples/tutorials/ItWaspsOnMyMachine/src/.waspignore b/examples/streaming/src/.waspignore
similarity index 100%
rename from examples/tutorials/ItWaspsOnMyMachine/src/.waspignore
rename to examples/streaming/src/.waspignore
diff --git a/examples/streaming/src/client/Main.css b/examples/streaming/src/client/Main.css
new file mode 100644
index 000000000..b6e7ed3f1
--- /dev/null
+++ b/examples/streaming/src/client/Main.css
@@ -0,0 +1,89 @@
+* {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+}
+
+.container {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+main {
+ padding: 5rem 0;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+main p {
+ font-size: 1.2rem;
+}
+
+.logo {
+ margin-bottom: 2rem;
+}
+
+.logo img {
+ max-height: 200px;
+}
+
+.welcome-title {
+ font-weight: 500;
+}
+
+.welcome-subtitle {
+ font-weight: 400;
+ margin-bottom: 3rem;
+}
+
+.buttons {
+ display: flex;
+ flex-direction: row;
+}
+
+.buttons .button:not(:last-child) {
+ margin-right: 0.5rem;
+}
+
+.button {
+ border-radius: 3px;
+ font-size: 1.2rem;
+ padding: 1rem 2rem;
+ text-align: center;
+ font-weight: 700;
+ text-decoration: none;
+}
+
+.button-filled {
+ border: 2px solid #bf9900;
+ background-color: #bf9900;
+ color: #f4f4f4;
+}
+
+.button-outline {
+ border: 2px solid #8a9cff;
+ color: #8a9cff;
+ background-color: none;
+}
+
+code {
+ border-radius: 5px;
+ padding: 0.2rem;
+ background: #efefef;
+ font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+ Bitstream Vera Sans Mono, Courier New, monospace;
+}
diff --git a/examples/streaming/src/client/MainPage.jsx b/examples/streaming/src/client/MainPage.jsx
new file mode 100644
index 000000000..93a197e63
--- /dev/null
+++ b/examples/streaming/src/client/MainPage.jsx
@@ -0,0 +1,57 @@
+import { useState, useEffect } from "react";
+import config from "@wasp/config";
+import "./Main.css";
+
+const MainPage = () => {
+ const { response } = useTextStream("/api/streaming-test");
+ return (
+
+ {response} +
+No tasks yet.
; return ( -Home
++ Cast your vote for one of the options. +
+ )} + {poll && ( +{option.description}
+- { 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 - ! -
-- 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. -
-{data?.app.name}
+Loading...
+- See Waspleau here! | See the code + See Waspleau here! | See the code
We've built a dashboard powered by a job queue using Wasp! @@ -30,7 +30,7 @@ We've built a dashboard powered by a job queue using Wasp! Let’s face it - metrics are all around us. Wouldn’t it be great if there was a quick and easy way to build a nice-looking metrics dashboard from data pulled in by HTTP calls to many different sources, cache the data in-memory, and periodically update it via background jobs? Why yes, yes it would... so we made an example Wasp app called Waspleau that does just that! -Here is what it looks like live: https://waspleau.netlify.app/ There is also a screenshot at the top of this post for those who refrain from clicking on any unknown web links for fear of being **Rickrolled**. Respect. +Here is what it looks like live: https://waspleau-app-client.fly.dev/ There is also a screenshot at the top of this post for those who refrain from clicking on any unknown web links for fear of being **Rickrolled**. Respect. ## “Show me the code” diff --git a/web/blog/2022-09-05-dev-excuses-app-tutrial.md b/web/blog/2022-09-05-dev-excuses-app-tutrial.md index ef3e68b05..a907bf8d5 100644 --- a/web/blog/2022-09-05-dev-excuses-app-tutrial.md +++ b/web/blog/2022-09-05-dev-excuses-app-tutrial.md @@ -23,7 +23,7 @@ We’ll use Michele Gerarduzzi’s [open-source project](https://github.com/mich - Building an app shouldn’t take more than 15 minutes. - Use modern web dev technologies (NodeJS + React) -As a result – we’ll get a simple and fun pet project. You can find the complete codebase [here](https://github.com/wasp-lang/wasp/tree/release/examples/tutorials/ItWaspsOnMyMachine). +As a result – we’ll get a simple and fun pet project. You can find the complete codebase [here](https://github.com/wasp-lang/wasp/tree/590a08bb14284835c9785d416980da61fe9e0db0/examples/tutorials/ItWaspsOnMyMachine). ![Final result](../static/img/final-excuse-app.png) diff --git a/web/blog/2023-09-17-ai-meme-generator-how-to-use-openai-function-call.md b/web/blog/2023-09-17-ai-meme-generator-how-to-use-openai-function-call.md new file mode 100644 index 000000000..f0fa33be6 --- /dev/null +++ b/web/blog/2023-09-17-ai-meme-generator-how-to-use-openai-function-call.md @@ -0,0 +1,1303 @@ +--- +title: "Build your own AI Meme Generator & learn how to use OpenAI's function calls" +authors: [vinny] +image: /img/memerator-banner-tall.gif +tags: [ai, meme, openai, function calling, react, full-stack, generate] +--- + +## Table of Contents + +- [TL;DR](#tldr) +- [Intro](#intro) + - [Call Me, Maybe](#intro) + - [Let's Build](#lets-build) +- [Part 1](#config) + - [Configuration](#config) + - [Project Set Up](#setup) + - [Database Set up](#db) + - [Environment Variables](#env) + - [Start Your App](#start) + - [Generating Memes](#generate-meme) + - [Server-Side Code](#generate-server) + - [Client-Side Code](#generate-client) +- [Part 2](#part-two) + - [Fetching & Updating Templates w/ Cron Jobs](#templates) + - [Defining our Daily Cron Job](#cron) + - [Testing](#cron-test) + - [Editing Memes](#edit) + - [Server-Side Code](#server) + - [Client-Side Code](#client) + - [Deleting Memes](#delete) +- [Conclusion](#conclusion) + + +# TL;DR + +In this two-part tutorial, we’re going to build a full-stack instant Meme Generator app using: + +- React & NodeJS w/ TypeScript +- OpenAI’s [Function Calling API](https://platform.openai.com/docs/guides/gpt/function-calling) +- ImgFlip.com’s [meme creator API](https://imgflip.com/api) + + + +You check out a deployed version of the app we’re going to build here: [The Memerator](https://damemerator.netlify.app) + +If you just want to see the code for the finished app, check out the [Memerator’s GitHub Repo](https://github.com/vincanger/memerator) + + +# Intro + +## Call Me, Maybe + +With [OpenAI’s chat completions API](https://platform.openai.com/docs/guides/gpt), developers are now able to do some really cool stuff. It basically enables ChatGPT functionality, but in the form of a callable API you can integrate into any app. + +But when working with the API, a lot of devs wanted GPT to give back data in a format, like JSON, that they could use in their app’s functions. + +Unfortunately, if you asked ChatGPT to return the data in a certain format, it wouldn’t always get it right. Which is why [OpenAI released function calling](https://platform.openai.com/docs/guides/gpt/function-calling). + +As they describe it, function calling allows devs to “… describe functions to GPT, and have the model intelligently choose to output a JSON object containing arguments to call those functions.” + +This is a great way to turn natural language into an API call. + +So what better way to learn how to use GPT’s function calling feature than to use it to call [Imgflip.com’s meme creator API](https://imgflip.com/api)!? + +![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a0bc9uxabyg8cue2axu.png) + + +## Let’s Build + +In this two-part tutorial, we’re going to build a full-stack React/NodeJS app with: + +- Authentication +- Meme generation via OpenAI’s function calling and ImgFlip.com’s API +- Daily cron job to fetch new meme templates +- Meme editing and deleting +- and more! + +![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwkbfq9kx8xlu7fb25v0.png) + +I already deployed a working version of this app that you can try out here: [https://damemerator.netlify.app](https://damemerator.netlify.app) — so give it a go and let’s get… going. + +In Part 1 of this tutorial, we will get the app set up and generating and displaying memes. + +In Part 2, we will add more functionality, like recurring cron jobs to fetch more meme templates, and the ability to edit and delete memes. + +BTW, two quick tips: + +1. if you need to reference the app’s finished code at any time to help you with this tutorial, you can check out the app’s [GitHub Repo here](https://github.com/vincanger/memerator). +2. if you have any questions, feel free to hop into the [Wasp Discord Server](https://discord.gg/rzdnErX) and ask us! + +# Part 1 + + + +## Configuration + +We’re going to make this a full-stack React/NodeJS web app so we need to get that set up first. But don’t worry, it won’t take long AT ALL, because we will be using [Wasp](https://wasp-lang.dev) as the framework. + +Wasp does all the heavy lifting for us. You’ll see what I mean in a second. + + + +### Set up your Wasp project + +First, install Wasp by running this in your terminal: + +```bash +curl -sSLStart generating meme ideas by providing topics and intended audience.
+ + + {!!memes && memes.length > 0 ? ( + memes.map((memeIdea) => ( ++
-
+
-
- We are in Beta (try it out)!
-
-
+
+ We are in Beta (try it out)!
+
+
{description}
- ); -} \ No newline at end of file + ) +} diff --git a/web/docs/advanced/deployment/_addExternalAuthEnvVarsReminder.md b/web/docs/advanced/deployment/_addExternalAuthEnvVarsReminder.md index 52e0b68a3..54385d141 100644 --- a/web/docs/advanced/deployment/_addExternalAuthEnvVarsReminder.md +++ b/web/docs/advanced/deployment/_addExternalAuthEnvVarsReminder.md @@ -1,4 +1,4 @@ :::tip Using an external auth method? -If your app is using an external authentication method(s) supported by Wasp (such as [Google](/docs/auth/social-auth/google#4-adding-environment-variables) or [GitHub](/docs/auth/social-auth/github#4-adding-environment-variables)), make sure to set the necessary environment variables. +If your app is using an external authentication method(s) supported by Wasp (such as [Google](/docs/auth/social-auth/google#4-adding-environment-variables) or [GitHub](/docs/auth/social-auth/github#4-adding-environment-variables)), make sure to additionally set the necessary environment variables specifically required by these method(s). ::: diff --git a/web/docs/advanced/deployment/cli.md b/web/docs/advanced/deployment/cli.md index b7a4cf289..2dd3378f9 100644 --- a/web/docs/advanced/deployment/cli.md +++ b/web/docs/advanced/deployment/cli.md @@ -34,6 +34,10 @@ Using the Wasp CLI, you can easily deploy a new app to [Fly.io](https://fly.io) wasp deploy fly launch my-wasp-app mia ``` +:::caution Specifying Org +If your account is a member of more than one organization on Fly.io, you will need to specify under which one you want to execute the command. To do that, provide an additional `--org{description}
- ); + ) } diff --git a/web/docs/auth/social-auth/overview.md b/web/docs/auth/social-auth/overview.md index d80b4e5c3..9a89101e5 100644 --- a/web/docs/auth/social-auth/overview.md +++ b/web/docs/auth/social-auth/overview.md @@ -325,7 +325,7 @@ If you're looking for the fastest way to get your auth up and running, that's wh The UI helpers described below are lower-level and are useful for creating your custom forms. ::: -Wasp provides sign-in buttons, logos and URLs for each of the supported social login providers. +Wasp provides sign-in buttons and URLs for each of the supported social login providers.
{description}
- ); + ) } diff --git a/web/src/components/Benefits.js b/web/src/components/Benefits.js index 3a24dc6df..e0e2d2ea3 100644 --- a/web/src/components/Benefits.js +++ b/web/src/components/Benefits.js @@ -8,52 +8,47 @@ import styles from '../pages/styles.module.css' const Lang = () => ( <> - - language - + language > ) const Benefit = ({ Icon, title, description }) => ( -- { description } -
+{description}
- Wasp provides all the best practices out-of-the-box and lets you focus on your code. +
+ Wasp provides all the best practices out-of-the-box and lets you + focus on your code.
{source || children}
- );
+ )
}
diff --git a/web/src/components/Collapse.tsx b/web/src/components/Collapse.tsx
index 857330d73..2ab5d213d 100644
--- a/web/src/components/Collapse.tsx
+++ b/web/src/components/Collapse.tsx
@@ -1,12 +1,15 @@
import React from 'react'
import Details from '@theme/MDXComponents/Details'
-export default function Collapse(props: { children: React.ReactNode; title: string }) {
- const { children, title } = props;
- return (
- {props.description}
+{props.description}
- Take a look at examples - see how things work and get inspired for your next project. +
+ Take a look at examples - see how things work and get inspired for + your next project.
- 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 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 - while Ruby on Rails and Django are considered full-stack frameworks, they require extra work to support modern “desktop” experience that most web apps offer today.
- Wasp is made specifically for that use case and supports it out-of-the-box, with a lot of extra niceties that make developer's life easier.
-
- Ruby on Rails and Django both fall in the category of full-stack web frameworks - they allow you to write backend/server code and also generate html/css that gets sent to the client.
-
- The main reason why they are often today not used as a standalone solution, but rather as an API server combined with frontend libraries such as React & Vue, is to add support for the client side manipulation of DOM.
- That’s especially important for web applications with a lot of dynamic content (e.g. dashboards) where you want “smooth” experience of a desktop app.
- Imagine expanding a post on Twitter or moving a Trello card and suddenly the whole site starts reloading - that's why you need React or Vue.
-
- Wasp supports this behaviour out-of-the-box, along with all the best practices. One of the biggest time savers is automatic sharing of data models between the database, frontend
- and the client - with RoR of Django you’d typically have implement a custom API (e.g. rest or graphql), while with Wasp you can skip that step in entirety.
-
+ TL;DR - while Ruby on Rails and Django are considered
+ full-stack frameworks, they require extra work to support modern
+ “desktop” experience that most web apps offer today. Wasp is made
+ specifically for that use case and supports it out-of-the-box, with a
+ lot of extra niceties that make developer's life easier.
+
+
+ Ruby on Rails and Django both fall in the category of full-stack web
+ frameworks - they allow you to write backend/server code and also
+ generate html/css that gets sent to the client.
+
+
+ The main reason why they are often today not used as a standalone
+ solution, but rather as an API server combined with frontend libraries
+ such as React & Vue, is to add support for the client side manipulation
+ of DOM. That’s especially important for web applications with a lot of
+ dynamic content (e.g. dashboards) where you want “smooth” experience of
+ a desktop app. Imagine expanding a post on Twitter or moving a Trello
+ card and suddenly the whole site starts reloading - that's why you need
+ React or Vue.
+
+
+ Wasp supports this behaviour out-of-the-box, along with all the best
+ practices. One of the biggest time savers is automatic sharing of data
+ models between the database, frontend and the client - with RoR of
+ Django you’d typically have implement a custom API (e.g. rest or
+ graphql), while with Wasp you can skip that step in entirety.
+
- 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 for that is that Wasp is a really simple configuration language, without any
- loops or variables - you can think of it as 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, ...
-
+ 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 for that is that Wasp is a really simple configuration
+ language, without any loops or variables - you can think of it as 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.
-
+ 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.
+