Command Line Interface Gorilla (CLIG) by Oscar, Tom’s son. 👍 Photo source: Unsplash

Building your app

So, you followed Tom’s tutorial on how to get started with ViewsDX, and you’re wondering: what’s next? How do I turn all my hard work into a real app? Wonder no more.

In this tutorial we will:

• Set up our gorilla CLI tool to sync and deploy apps in a snap 🙌
• Install the latest NodeJS, 7.5.0 or above
• Install ViewsDX CLI
• Run your first app
• Integrate your views from ViewsDX
• Deploy your app
• Enjoy the process with the help of many emoticons 💥

Follow me on this quest 👻!

🤓 Pre-requisites

Views gorilla CLI needs the latest NodeJS (7.5.0 and above) to work. So, if you don’t have it installed yet, let’s do that first.

If you’re on Linux or Mac. Run the following in your terminal:

# install "n" to manage node versions
curl -L https://git.io/n-install | bash
# install the latest node
n latest

If you’re on Windows, download the latest installer from https://nodejs.org/en and run it. Here’s an amazing guide if you run into
trouble.

ViewsDX CLI

Here’s a quick video showing all the steps below

Installing it

npm install --global viewsdx

Yeah, that’s it. It may take a bit the first time. Be patient 🙃 .

Running it for the first time

In your terminal, run:

viewsdx

The first time you run the CLI, you’ll be asked to login. Use the same email and password you use to access your apps at viewsdx.com.

Once logged in, you will be presented with the list of apps you have access to. Write the names of the one you want to sync to your computer or hit Return to import them all.

Whether your project folder already exists or not, the CLI will put all your morphed Views inside a “/views” folder (the path will be printed for you).

Yeah, that’s it 😄. That wasn’t that scary, was it? 👻

⛏ Running your app

Follow the steps printed below the message “☀️ nameOfYourApp is ready!”

cd /yourProjectPath

and run

npm start

A new browser window will open automatically with a placeholder View ✨.

When you see this placeholder View it means, you can start morphed code integration

🎨 Developing your app

The React project will have this folder structure:

├── README
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
    ├── index.js
    └── views

All of the app is inside the src folder. The file src/index.js has everything you need to get started.

While you’re running viewsdx, your Views will be automatically synced to src/views. You can use them like import MyView from 'views/MyView.js'. The CLI also imports the props tab as a JSON file for your convenience. Use it like import myViewData from 'views/MyView.json'. The video above shows you how to do this with MrBananaForHire’s view from the tutorial.

🎉 Deploying your app

Deploying is an important part of building your app!
We want to help you deploy as often as possible, so you can get out there and share your results. For that, we’ve included integration with https://surge.sh, which has a free tier to deploy your apps in a very easy way. Just run:

npm run deploy

and watch it happen ;).

We aren’t affiliated with them in any way, we just think it’s a cool service and wanted to share it with you. Of course, you aren’t tied to it by any means. Running npm run build creates a build folder with your latest app files that you can upload to any web server.

Help ⁉️

Have any questions or feedback? Leave it in the comments below or join us on https://slack.viewsdx.com. @tom and @dario are there to help 👋 .

Made with 👾 at viewsdx.com.