Swizec Teller - a geek with a hatswizec.com

    React Bricks - visual blocks editor for NextJS #CodeWithSwiz 22

    Tried a new visual editor for NextJS and CreateReactApp. Got a site up in 20min ๐Ÿค˜

    CodeWithSwiz is a weekly live show. Like a podcast with video and fun hacking. Focused on experiments and open source. Join live Mondays

    A friend asked me to try React Bricks and honestly I was skeptical. Visual website builders. Pfft. What self-respecting web developer uses a WYSIWYG?

    Give me markdown or give me death.

    And then we got this page up in 20 minutes. It's pretty, easy to edit, and anyone can use it to run experiments. No custom code.

    USh3X7pnghj01jg

    We even got the founder to leave a totally real review.

    Definitely real review
    Definitely real review

    How it works

    React Bricks is currently in beta and worth a try. Going to be a paid tool when it's ready.

    Start with a CLI command to create a new site and follow the prompts:

    $ npx create-reactbricks-app

    You get a NextJS project (or CRA) configured to use with React Bricks. Beautiful default setup using Tailwind and a couple bricks to show what's possible.

    There's the usual suspects like hero headers, testimonials, email signup, image with left-text, FAQ, etc. Everything you need for a generic yet decent landing page.

    Copy is what matters ๐Ÿ˜‰

    Click the edit button, login with your React Bricks account, and you get a visual editor.

    Visually editing a Brick

    Typical visual editors suck. They're fiddly. Click the wrong thing and lose all your work kind of fiddly.

    But this one was nice. Felt stable. I couldn't get it to lose my work.

    Except that one time I didn't notice a required field and couldn't save and refreshed the page. But that's on me.

    Deploy

    When you're happy with the page, Vercel is your friend.

    $ vercel

    Page goes live and becomes a typical NextJS site. Render-on-demand, cached for speed, HTML has all the content.

    Editor works on your live page. No need for local dev environments ๐Ÿค˜

    You have to re-deploy for changes to go live.

    Go live button

    A deploy webhook givesย you the Go Live button. Anyone can press this without engineering skills and that's love.

    React Bricks deploy screen
    React Bricks deploy screen

    We set this up on stream.

    Go into Vercel dashboard, integrate with Git. You don't have git-based version control because of the visual editor, but okay Vercel likes it that way.

    Then you create a hook and paste it in React Bricks settings.

    Vercel deploy hook
    Vercel deploy hook

    You'll need to set up your API key as a secret on Vercel. Automated deploys get an error otherwise, but not when you deploy manually. Not sure how that works ๐Ÿค”

    React Bricks api key env vars
    React Bricks api key env vars

    Anyone with edit access to your site can deploy changes. No dev environment required. Great when you're traveling and find a typo.

    The mechanics, probably

    React Bricks is closed source so this is a guess. I'll ask Matteo if I'm close :)

    The visual editor itself is made of unicorns and magic.

    Controls on the right are component props. Every change triggers a re-render because React.

    When you hit Save, a JSON representation of each component's props and children saves to a database. A JSON for page structure describes the bricks order.

    Something like this:

    {
    type: "page",
    name: "Home",
    bricks: [
    {
    type: "hero",
    props: [
    layout: "white",
    borderTop: "none",
    ...
    ],
    children: [
    ...
    ]
    }
    ]
    }

    Then there's the [slug].tsx component that represents each page. You can see it here.

    There's a getStaticProps that phones home and fetches this JSON. The page then uses a <PageViewer> component to render.

    export const getStaticProps: GetStaticProps = async (context) => {
    const { slug } = context.params
    const page = await fetchPage(slug.toString(), config.apiKey)
    return { props: { page } }
    }
    const Page: React.FC<PageProps> = ({ page }) => {
    // ..
    return (
    <Layout>
    // ...
    <PageViewer page={pageOk} />
    </Layout>
    )
    }

    Neat trick.

    Works great because NextJS is smart enough to call this once. First visitor gets a slow page, everyone else gets blazing speed.

    But Why?

    Adrian said it best on stream:

    I got tired of building 100 wordpress pages every year and hired a bunch of people. Became an agency and now I can focus on my unique value props. This would make everything easier.

    He's right. Landing pages are the lettuce of webdev. Don't craft that shit by hand. You've got interesting things to do.

    Like creating custom bricks ๐Ÿ˜

    Cheers,
    ~Swizec

    PS: this is not an ad but the founders did ask me to check it out through a friend

    Did you enjoy this article?

    Published on February 9th, 2021 in CodeWithSwiz, Technical, NextJS, Vercel, Livecoding

    Learned something new?
    Want to become a high value JavaScript expert?

    Here's how it works ๐Ÿ‘‡

    Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet ๐Ÿ“–right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Start with an interactive cheatsheet ๐Ÿ“–

    Then get thoughtful letters ๐Ÿ’Œ on mindsets, tactics, and technical skills for your career.

    "Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. ๐Ÿ‘Œ"

    ~ Ashish Kumar

    Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. โœŒ๏ธ

    Have a burning question that you think I can answer?ย I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

    Ready to Stop copy pasting D3 examples and create data visualizations of your own? ย Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first ๐Ÿ’ฐ on the side with ServerlessReact.Dev

    Want to brush up on your modern JavaScript syntax?ย Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you areย โค๏ธ

    Created bySwizecwith โค๏ธ