Veryfront Logo

Getting Started

Build and deploy your first web app with Veryfront in just a few minutes.

In this guide we create a simple landing page, add page content with MDX, and publish your first app to a production environment. Once you’ve completed this guide and know the basics, you can tackle more complex projects and take full advantage of Veryfront’s versatility.

Prerequisites  

  • Familiarity with front-end technologies HTML, CSS, and JavaScript.
  • Experience with React is an advantage but not essential.

Sign-in  

Visit https://veryfront.com/sign-in and sign in to Veryfront with your Google or GitHub account.

Sign-in screen UI

After signing in, you’re redirected to the Dashboard, where you can manage your projects.

Dashboard UI

Create a New Project  

In the Dashboard, click the “Create Project” button to open the respective form in an overlay.

Dashboard New Project Button

Enter a project name and a slug and confirm by clicking “Create Project”.

Create Project Overlay

After creating your project, you’re redirected to the Builder, the main editing view.

Create Your First Page  

In the Builder, you can see the Live Editor with sample code for the Home page on the left and the page rendered in the Live Preview on the right.

New Project Page

Let’s create a new page. Click on the Pages menu icon in the Sidebar.

Pages Menu Menu Icon

The Pages menu lists all the pages in your project. At the moment, there is only the default Home page.

Pages Menu Home Page

Click the plus icon in the top right corner of the Pages menu to open the "Create Page" overlay.

Pages Menu New Page Button

Enter the page name and a unique page path. You can also specify a page path using slashes, as shown in the image below.

Create Page Overlay

Confirm your input by clicking “Create Page”. This opens the new page in the Live Editor.

Add Page Content  

Veryfront’s Live Editor allows you to create content with MDX. Right now, your new page’s still empty, so let’s compose a simple landing page consisting of:

  • Header
  • Hero section
  • Feature section
  • How it works section
  • Footer
Add Page Content Sample Page

Click the Insert menu icon in the Sidebar.

Insert Menu Menu Icon

The Insert menu lists your project’s components that you can use to add content to your page.

Insert Menu Insert Component

Let’s select the components needed for our landing page.

Open the Chakra UI section, and you can see a list of components sorted by category. Click the following components to have them inserted into the Live Editor:

  • Chakra UI > Layout - Center
  • Chakra UI > Typography - Heading
  • Chakra UI > Layout - Container
  • Chakra UI > Layout - SimpleGrid
  • Chakra UI > Typography - Text

As you add components and edit your page in the Live Editor, you can instantly see your changes in the Live Preview.

Here's the page right after inserting the components.

Add Page Content Unedited Sample Page

After tweaking and polishing the various components:

Add Page Content Edited Sample Page

Here’s the page’s code:

<Center
  bg="url(https://picsum.photos/id/3/1920/540?grayscale)"
  backgroundSize="cover"
  backgroundPosition="center"
  minH="50vh"
  color="white"
>
  <Box p={4} textAlign="center">
    <Text fontSize="6xl" fontWeight={900}>
      Main benefit
    </Text>
    <Text fontSize="3xl">Short benefit description</Text>
  </Box>
</Center>

export const features = [
  {
    title: "Main feature",
    copy: "A brief description, benefit or feature",
  },
  {
    title: "Another feature",
    copy: "Here is another brief description",
  },
  {
    title: "And another",
    copy: "Yet another brief description or benefit",
  },
];

<Container maxW="1200px">
  <SimpleGrid
    columns={{
      base: 1,
      lg: 3,
    }}
    spacing={4}
  >
    {features.map(({title, copy}) => (
      <Center key={title} bg="#444" minH="25vh" color="white" p={8}>
        <Box minW="75%">
          <Heading as="h3" fontSize="2xl" mb={4}>
            {title}
          </Heading>
          <Text fontSize="xl">{copy}</Text>
        </Box>
      </Center>
    ))}
  </SimpleGrid>
</Container>

<Container maxW="960">
  <SimpleGrid
    columns={{
      base: 1,
      md: 2,
    }}
    spacing={4}
    mb={24}
  >
    <Heading fontSize="5xl" color="#444" mb={4}>
      Feature Section
    </Heading>
    <Text
      fontSize={{
        base: "md",
        md: "xl",
      }}
    >
      Here’s a slightly more detailed description of the main feature.
      It doesn’t need to be too detailed, just
      enough to entice the visitor to move on and investigate further.
    </Text>
  </SimpleGrid>

  <Box mb={32}>
    <Heading
      fontSize="5xl"
      mb={4}
      color="#444"
    >
      Detail introduction
    </Heading>
    <Text>
      This will be a more detailed description of the interesting feature.
    </Text>
    <Text>
      There are many benefits to a joint design and development system. Not only
      does it bring benefits to the design team, but it also brings benefits to
      engineering teams. It makes sure that our experiences have a consistent
      look and feel, not just in our design specs, but in production as well.
    </Text>
  </Box>

  <SimpleGrid
    columns={{
      base: 1,
      md: 2,
    }}
    spacing={4}
    mb={24}
  >
    <Image
      src="https://picsum.photos/id/2/750?grayscale"
      alt="decoration"
      order={{
        base: 2,
        md: 1,
      }}
    />
    <Heading
      fontSize="5xl"
      color="#444"
      textAlign={{
        md: "right",
      }}
      mb={4}
      order={{
        base: 1,
        md: 2,
      }}
    >
      Decorative <br/>Section
    </Heading>
  </SimpleGrid>
</Container>

Save the Page  

Once you are happy with your page, use the CMD+S/CTRL+S shortcut to save it. This creates a snapshot of your page with a version number that you can roll back to at any time, similar to a Git Commit.

Publish Your App  

To publish your app to the production environment, simply click the “Publish” button in the upper right corner of the Top Bar in the Builder.

Builder UI Publish Button

After publishing, an overlay is shown with the link to your app in production.

Builder UI Publish Button Overlay

Click this link to open your app in a new browser tab. To view your newly created page, update the URL by adding the page’s path.

Builder UI Publish Update Page Link

Congratulations, you’ve just published your first app with Veryfront!

Next Steps  

The next step we recommend is experimenting a bit more with your new app. Once you feel comfortable creating pages and adding components, you could explore the following guides:

  • Creating Components
  • App Component
  • Layout Components
<  Studio TourCreating Projects  >
Veryfront Logo

GDPR
COMPLIANT


© 2022 CoderSociety GmbH. Hosted in Germany.

Made with Veryfront