diff --git a/web/blog/2023-06-22-wasp-launch-week-three.md b/web/blog/2023-06-22-wasp-launch-week-three.md new file mode 100644 index 000000000..5fe184479 --- /dev/null +++ b/web/blog/2023-06-22-wasp-launch-week-three.md @@ -0,0 +1,143 @@ +--- +title: 'Wasp Launch Week #3: Magic' +authors: [matijasos] +image: /img/lw3/lw3-banner.png +tags: [launch-week, update] +--- + +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +import InBlogCta from './components/InBlogCta'; +import WaspIntro from './_wasp-intro.md'; +import ImgWithCaption from './components/ImgWithCaption' + + + +By now, it is a tradition. For the every upcoming launch week, we ask ourselves how can we top the last one? How can we make building full-stack web apps easier, more enjoyable and get rid of even more boilerplate? + +If this is the first time you're joining, check our previous launches: +- [Launch Week 1: Beta](/blog/2022/11/26/wasp-beta-launch-week) +- [Launch Week 2: Pizzazz](/blog/2023/04/11/wasp-launch-week-two) + +Our first launch week was about making the promise of Wasp Alpha a reality, so you can build what you envisioned and deploy your app to production. The second launch made the whole experience much more polished, getting closer to the DX you'd expect from a mature web framework. + +## Why Magic? + +For this launch, with all the basics in place and [you having built thousands of apps with Wasp](/blog/2023/01/31/wasp-beta-launch-review) (thank you!), **we started pushing the boundaries of what web frameworks can do**, utilising Wasp's unique DSL/compiler approach. This is still barely scratching the surface, but you'll be able to try it out yourself and get a taste of what the future of web development will look like. + + + + +## What's coming 🐝 + +Every day next week, starting Monday, June 26, we'll highlight a major new feature in Wasp. We'll update this post daily as we reveal each feature, so make sure to keep coming back! Follow us on twitter ([@wasplang](https://twitter.com/WaspLang)) to stay in the loop and also [join our Discord](https://discord.gg/rzdnErX) to join the community and get help as you're trying Wasp out. + + +## Launch party 🚀🎉 + + + +What would a launch be without a proper event and a party? A boring, heartless event, that's what! + +That's why we'll get together to celebrate the launch, our community (you!) and all the hard work that's been put into this new, fresh edition of Wasp. You will also get to meet the team and hear first-hand from the makers about the latest features and plans for the future. + +The party starts at **9.30 am EDT / 3.30 pm CET** - sign up [here](https://discord.gg/p7TzVUn2?event=1121156549080002680) and make sure to mark yourself as "interested"! + + + +As per usual, there will be memes, swag and lots of interesting dev discussions! + +## Monday: The future is now 🛸 + + + +We'll immediately kick things off with a bang! What's the one thing that all developers universally agree is something they'd like to do less of? Writing boilerplate CRUD logic, of course! Yet, it's 2023 and the best we managed to do is get an AI write it half-correctly for us and we still have to maintain it. + +That's what we are coming after - is it possible to avoid writing (or generating) CRUD code in the first place? How far can we take it and what's then even left for your to code? Join us on Monday and find out! + +**When**: Monday, June 26 2023 + +**Read more about it**: coming soon + +## Tuesday: Be real, time 🔌⏱ + + + +Sometimes, you just want to keep it real. Especially when you are dealing with time. I've been dropping some hints here - have you figured out what is this about? If yes, drop us a line on twitter ([@wasplang](https://twitter.com/WaspLang)) and the first one to get it right will get a special (real and timely) award! + +Another situation where you might want to keep things real is when chatting to someone, especially via the text (*wink wink hint hint 🧦*). + +**When**: Tuesday, June 27 2023 + +**Read more about it**: coming soon + +## Wednesday: Community Day 🤗 + + + +Community is at the centre of Wasp, and Wednesday is at the centre of the week, so it's only appropriate to marry the two together. We'll spotlight the amazing OSS tools Wasp is built on top of and also you - all the cool stuff you have built with Wasp and how you're contributing every day to make our community better! + +**When**: Wednesday, June 28 2023 + +**Read more about it**: coming soon + +## Thursday: Take care of your tools 🛠 + + + +It's a well known fact that a developer is only as good as the tools they are using. That actually applies to anybody - if Gimli hadn't spent time sharpening his axe, he wouldn't stand a chance against these orcs, would he? + +Us at Wasp, we are pretty much the same as Gimli - we take our tools seriously. As we are innovating on the framework features, our goal is to do the same with the tooling you use with Wasp. Get ready to get your hands dirty (with code). + +**When**: Thursday, June 29 2023 + +**Read more about it**: coming soon + +## Friday: Waspularity 🤖 + Tutorial-o-thon! + + + +For the final day of the launch week, we have a really cool surprise for you. I'll just say it's something like Matrix but the robots are your friends and there's no that weird guy with sunglasses to ruin everything. And there might be cake. + +To wrap the week up, we'll also start another hackathon, but this time in a bit different format. Since the best way to learn something is to teach it to others, we'll focus on tutorials this time! May the best tutorial win - more info coming soon. + +**When**: Friday, June 30 2023 + +**Read more about it**: coming soon + +## Recap + +- **We are kicking off Launch Week #3 on Mon, June 26, at 9.30am EDT / 3.30pm CET** - make sure to [register for the event](https://discord.gg/p7TzVUn2?event=1121156549080002680)! +- **Launch Week #3 brings a ton of new exciting features** - we’ll highlight one each day, starting Monday. Follow us on [twitter](https://twitter.com/WaspLang) and [join our Discord](https://discord.gg/rzdnErX) to stay in the loop! +- **Following launch week, we’ll announce a tutorial-o-thon** - get your writing gear ready! diff --git a/web/docs/deploying.md b/web/docs/deploying.md index 2400d7d66..7c354861c 100644 --- a/web/docs/deploying.md +++ b/web/docs/deploying.md @@ -32,12 +32,14 @@ In the above commands, we used an app basename of `my-wasp-app` and deployed it - `my-wasp-app-server` - `my-wasp-app-db` -:::caution +:::tip Unique Name Your app name must be unique across all of Fly or deployment will fail. Additionally, please do not CTRL-C or exit your terminal as these commands run. ::: -:::note -Fly has [free allowances](https://fly.io/docs/about/pricing/#free-allowances) for up to 3 VMs. If you already have some apps deployed on their free Hobby Plan, you will need to add your credit card info before proceeding. +:::caution A Note on Free Tiers 💳 +Fly has [free allowances](https://fly.io/docs/about/pricing/#plans) for up to 3 VMs (so deploying a Wasp app to a fresh account is free), but all plans require you to add your credit card info before proceeding. If you don't, the deploy will fail! + +To do so, go to your [account's billing page](https://fly.io/dashboard/personal/billing). ::: The list of available Fly regions can be found [here](https://fly.io/docs/reference/regions/). You can also run `wasp deploy fly cmd platform regions --context server`. @@ -367,16 +369,100 @@ NOTE: Make sure you set this URL as the `WASP_WEB_CLIENT_URL` environment variab ## Deploying to Railway ("freemium", all-in-one solution) -Railway makes it easy to deploy your entire app -- database, server, and client -- on one platform. You can use the platform for free for a limited time (~21 days) per month. Upgrading to the `Developer` plan will only cost you a few dollays per month per service. +Railway is a simple and great way to host your server and database. It's also possible to deploy your entire app -- database, server, and client. You can use the platform for free for a limited time, or if you meet certain eligibility requirements. See their [plans page](https://docs.railway.app/reference/plans) for more info. -:::danger 🛑 - Due to Railway's current proxy configuration, Google Auth will not currently work. If you're using Google Auth in your Wasp App, you can still deploy your back-end to Railway, but we suggest you [deploy your front-end to Netlify](#deploying-to-netlify) +:::caution ✋ + Due to Railway's current proxy configuration, client-side routing will not work correctly without some additional configuration, which is described in the toggle below. + + If you prefer NOT to configure your client for Railway, another option is to deploy only your back-end there, while deploying your client to a seperate service such as [Netlify](#deploying-to-netlify) + +
+ + Additional Configuration for Client-Side Routing + +
+ +1. Ensure your Wasp project is built by running `wasp build` in the project dir. +2. Go to `/.wasp/build/web-app` and create 2 files: + +- Dockerfile: simply create a file named `Dockerfile` with the contents below (note, it's important to use `FROM nginx:1.19.10-alpine`, as using anything other than this version may throw a lot of exceptions on the server): +```dockerfile +FROM node:18-alpine AS builder + +# Examples of any ENV variables that build requires for react app to have +ARG PORT +ARG WASP_WEB_CLIENT_URL +ARG REACT_APP_API_URL +ARG API_URL + +ENV REACT_APP_PORT=$PORT +ENV REACT_APP_WASP_WEB_CLIENT_URL=$WASP_WEB_CLIENT_URL +ENV REACT_APP_API_URL=$REACT_APP_API_URL + +# Add a work directory +WORKDIR /app + +COPY package.json . + +RUN npm install + +COPY . /app/ + +RUN npm run build + +FROM nginx:1.19.10-alpine + +# Set working directory to nginx asset directory +WORKDIR /usr/share/nginx/html + +# Remove default nginx static assets +RUN rm -rf ./* + +COPY --from=builder /app/build . + +COPY .nginx/nginx.conf /etc/nginx/conf.d/default.conf + +EXPOSE 3000 + +ENTRYPOINT ["nginx", "-g", "daemon off;"] +``` +- Create a file calle `.dockerignore` with the following contents: +``` +node_modules +``` +3. Create a new directory `/.nginx` inside the `web-app` dir. +4. Create a file `nginx.conf` inside the `/.nginx` dir with the following contents: +``` +server { + listen 8080; + server_name localhost; + + location / { + root /usr/share/nginx/html; + index index.html; + try_files $uri $uri/ /index.html; + } +} +``` +5. Make sure that the `client` service in Railway, which you will set up below, has env variable `PORT` set to `8080` (see the [Add Enviornment Variables](/docs/deploying#add-environment-variables) section below for more info). +6. Optionally, you may need to disable `tsc` in the `/.wasp/build/web-app/package.json` file if Docker fails on deploy due to typing issues: +``` + "scripts": { + "start": "npm run validate-env && vite", + "build": "npm run validate-env && vite build", + "validate-env": "node -r dotenv/config ./scripts/validate-env.mjs" + }, +``` +7. Then continue to follow the instructions below to deploy your app to Railway. + +
+
::: To get started, follow these steps: 1. [Generate deployable code](#generating-deployable-code) (`wasp build`) -2. Sign up at [Railway.app](https://railway.app) (Tip! Sign up with your GitHub account for $5/month of usage free) +2. Sign up at [Railway.app](https://railway.app) (Tip! Sign up with your GitHub account to be elligble for the free tier) 3. Before creating a new project, install the [Railway CLI](#https://docs.railway.app/develop/cli#install) by running the following command in your terminal: ```shell curl -fsSL https://railway.app/install.sh | sh diff --git a/web/src/components/Hero.js b/web/src/components/Hero.js index 9bf7e93a8..f890fd9a9 100644 --- a/web/src/components/Hero.js +++ b/web/src/components/Hero.js @@ -38,7 +38,7 @@ const ActionButtons = () => ( `} > - {'wasp new '} + {'Get Started'} @@ -55,7 +55,7 @@ const ActionButtons = () => ( `} > - Quick Guide + Documentation diff --git a/web/src/components/Nav/Announcement.js b/web/src/components/Nav/Announcement.js index e0660efed..9790ba438 100644 --- a/web/src/components/Nav/Announcement.js +++ b/web/src/components/Nav/Announcement.js @@ -9,7 +9,7 @@ const Announcement = () => { let history = useHistory(); const handleLink = () => { - history.push('/blog/2023/05/19/hackathon-2-review') + history.push('/blog/2023/06/22/wasp-launch-week-three') //history.push('/#signup') //window.open('https://twitter.com/MatijaSosic/status/1646532181324603395') @@ -39,7 +39,7 @@ const Announcement = () => { `} > - 🏆 Wasp Hackathon 2.0 is Finished! + 🔮 Wasp Launch Week #3: Jun 26 - 30 @@ -49,7 +49,7 @@ const Announcement = () => { hover:bg-neutral-600 `} > - Check Out the Winners 🎉 + Learn more → diff --git a/web/src/components/Nav/index.js b/web/src/components/Nav/index.js index e800491a5..787ec50bd 100644 --- a/web/src/components/Nav/index.js +++ b/web/src/components/Nav/index.js @@ -232,7 +232,7 @@ const Nav = () => { transition ease-out duration-200 `} > - {'wasp new '} + Get Started diff --git a/web/static/img/lw3/future-is-now.gif b/web/static/img/lw3/future-is-now.gif new file mode 100644 index 000000000..3e6d0caa0 Binary files /dev/null and b/web/static/img/lw3/future-is-now.gif differ diff --git a/web/static/img/lw3/hug.gif b/web/static/img/lw3/hug.gif new file mode 100644 index 000000000..3d9dd9eb9 Binary files /dev/null and b/web/static/img/lw3/hug.gif differ diff --git a/web/static/img/lw3/lw-event-how-to-join.png b/web/static/img/lw3/lw-event-how-to-join.png new file mode 100644 index 000000000..2dddac6ce Binary files /dev/null and b/web/static/img/lw3/lw-event-how-to-join.png differ diff --git a/web/static/img/lw3/lw2-event-screenshot.png b/web/static/img/lw3/lw2-event-screenshot.png new file mode 100644 index 000000000..1a5e939ac Binary files /dev/null and b/web/static/img/lw3/lw2-event-screenshot.png differ diff --git a/web/static/img/lw3/lw3-banner.png b/web/static/img/lw3/lw3-banner.png new file mode 100644 index 000000000..2b35c0d9a Binary files /dev/null and b/web/static/img/lw3/lw3-banner.png differ diff --git a/web/static/img/lw3/magic.gif b/web/static/img/lw3/magic.gif new file mode 100644 index 000000000..a23978bcf Binary files /dev/null and b/web/static/img/lw3/magic.gif differ diff --git a/web/static/img/lw3/realtime.jpg b/web/static/img/lw3/realtime.jpg new file mode 100644 index 000000000..a74b3dbb8 Binary files /dev/null and b/web/static/img/lw3/realtime.jpg differ diff --git a/web/static/img/lw3/tools.gif b/web/static/img/lw3/tools.gif new file mode 100644 index 000000000..36016f85e Binary files /dev/null and b/web/static/img/lw3/tools.gif differ diff --git a/web/static/img/lw3/waspularity.png b/web/static/img/lw3/waspularity.png new file mode 100644 index 000000000..8f5d154fd Binary files /dev/null and b/web/static/img/lw3/waspularity.png differ