Deploying to Stamplay a React, ES6, SASS-based app without hassle

I am a JavaScript Developer focused on creating the front-end of applications with sophisticated tools, such as React.js and SASS.

Recently, my ideas are happening thanks to the power of Stamplay, a nobackend technology for those front-end developers that want to go straight to the point: delivering value as fast as possible.

Yes — Stamplay gives you the backend and all you need to program by then is the HTML, CSS and JavaScript your app needs. Sounds beautiful, huh?

Setting up the development environment

The purpose of this tutorial isn’t showing you how to build an application using this or that technology. Meanwhile, I’ll be bootstrapping one using a sophisticated environment with React, ES6, SASS just to demonstrate you how easy is to getting started with Stamplay, by deploying an application among a complex game of technologies.

A few months ago, I met the react-starterify project. It brought all the technologies I was needing to fastly develop MVPs, such as React and SASS. More than this, it brought me the capability to automatize my tasks through Gulp — which suited perfectly in my needs since that day.

If you are familiar with these technologies, I’d like to recommend you, at least for now, to clone a fork of mine of that project that is symmetrically enhanced to easily deploy to Stamplay:

git clone git@github.com:chiefGui/react-starterify.git

and then:

cd react-starterify && npm install gulp -g && npm install

After the installation, we do need to create a vhost to enable us to test our application locally. Considering you’re using the OSX:

sudo vim /etc/hosts

and then after the last line:

127.0.0.1 app.dev

Preparing the Stamplay application

After setting up your application, it’s time to handle with another important matter: Stamplay.

The first thing you need to do, obviously, is creating an account on it. If you already did that, just log-in and create you app from the dashboard:

After that, click on the Hosting panel in the sidebar on the left:

Finally, enter app.dev:3000 in the CORS ENABLED DOMAINS input. Remembering that it needs to be a Fully Qualified Domain Name with the exception you can explicitly define a port — such as :3000.

Doing that, the result will be:

From now on you are able to make any requests you want to your API served by Stamplay, without any CORS bothering your day-by-day development.

Getting started with the development

I’m here to teach you how to integrate your technology-sophisticated-based-app to Stamplay instead of teaching how to creating components powered by React.

That being said, all you need is start watching your changes to unleash the ability to write your application with all that comfort I told you that react-starterify brings to you:

gulp watch

This command will open a browser window with localhost:3000 for you. Now, any change you make in any sass file from styles/ directory or in any javascript file from the scripts/ folder will be watched and your browser will automatically update when needed. Magical, huh?

Have fun writing your app, baby!

Deploying

When you want to get your app live, the first thing you need to do is initialize Stamplay. Actually, even before initializing it, you need to install it!

npm install stamplay-cli -g

The command above will install Stamplay toolbelt globally for you. By then, in your project’s folder, let’s initialize it:

stamplay init

This command will prompt you two things: appId and appKey. The appId, in my case is “myexampleofapp”; the appKey, meanwhile, is the secret “1eabd5d6dbbb59aaf8ae17ab4e7ebdb58dd2a527ea9df03c2fc8b6e3efcaf103”.

Both of them are available through the main page of your app:

Finally, keep in mind that your index.html file must to be in the same folder of your assets. In my version of react-starterify, when building your application to go live, all this work happens seamlessly. In the main folder of your project, please do:

gulp build

Wait a minute and as soon the build gets done, you’ll be able to see a dist/ folder in the root directory. All the files your app needs to happen are there and prepared to be deployed to Stamplay.

But before shouting the command we’re anxious to shout we need to specify within what folder the deployable application is in — in this case, dist/ — , and to do so, all you need is to open stamplay.json file from the directory you initialized Stamplay and change the value of “public” to “./dist/”, this way:

{
  // ...
  "public": "./dist/",
  // ...
}

Finally you’ll be ready to

stamplay deploy

put a message and enjoy your app on http://[yourappid].stamplayapp.com!