Publishing a fast, production-ready server side rendered React app takes a lot of effort. Platforms, build servers, CI, CD, CSS frameworks... So many choices, so little time.
VTEX Render is a web framework that let's you go "Straight to React"®. You just need an editor and a small CLI to sync your files. Updates are blazing-fast and it even does hot module replacement. By using GraphQL for data fetching, functional CSS for styling and a robust component library, developers create beautiful apps in hours, not weeks. Not only that: non-technical users can customize VTEX Render apps in a beautiful WYSIWYG interface.
VTEX Render is a refreshingly simple approach to building scalable web apps, fast.
VTEX Render is the Serverless Cloud framework for Universal Web Apps.
Serverless because you don't need to manage servers in production - more than scalable, it's elastic, supporting as little or as much traffic as you need to, on demand.
Cloud because you don't need to navigate a complex development environment in order to get started. You write the code, we take care of the rest. If only everything was this simple...
Universal because your apps are fully server side rendered, data fetching and all via GraphQL. Adiós, spinners! Hello, blazing-fast time-to-first-render!
Web because that's where your customers are, either sitting at their desktop, in the bus using their smartphone, or relaxing on the couch with their tablet. Oh, and we'll make it easy for you to be responsive by default.
Apps because you are able to build amazing, fluid and rich experiences like a full-fledged app.
Let's take a look at how it works!
In the VTEX IO Platform, all functionality is provided by installed Apps in your Account.
An App might depend on many services, but here we'll only discuss Render Apps, which are Apps that declare a dependency to the render framework. An app's dependencies can be found on its manifest.json file. For example:
{
"name": "dream-store",
"vendor": "vtex",
"version": "0.1.0",
"title": "Dream Store",
"description": "",
"mustUpdateAt": "2017-09-26",
"dependencies": {
"vtex.render": "0.x"
}
}
A render app might export multiple React Components. An example for a simple component could be found in an app's render folder. Take a look at this render/index.js example component:
import React, {Component} from 'react'
export default class GettingStartedIndex extends Component {
render () {
return (
<h1>Hello, world!</h1>
)
}
}
Finally, Placeholders are the building blocks for a Render site. They must have an id and a component, and optionally a settings object. The top-level Placeholder for a page is called a Root Placeholder, and it must also have a path property. (You'll see that this allow users to easily customize their site by configuring Placeholders dynamically! More on that later.)
An app may declare that, by default, it wants a given component to be rendered in a given path by declaring a default placeholder. This can be done by creating a render/placeholders.json file which specifies all default placeholders exported by this app. For example, we could have the following file:
{
"index": {
"path": "/",
"component": "index.js"
}
}
This tells Render that there's a Placeholder with the id index which should be rendered when going to the root / path with the component render/index.js.
Now, when you publish and install this app, Render Driver will build it and the Render HTTP server will be able to render it correctly when you make a request for http://youraccount.myvtex.com/.
That's the basic idea! From zero to rendered app in 3 minutes.
On the next steps, we will take a look at how to use workspaces to develop your own, separate branch of your site without impacting what's live, how to compose multiple apps, each with different components and routes, and finally how to configure custom placeholders that override apps configurations.