I’ve been playing with Google Cloud for some time now, mainly to compare it with what Amazon has to offer. In general, the experience with Google Cloud is very enjoyable, and feels much more developer-friendly than enterprise-friendly than AWS. There were some things that are more mature and more convenient in Amazon’s cloud, like DynamoDB with it’s pricing model or messaging with SNS, SQS and Kinesis. One thing that I feel is much better in Google’s cloud platform is AppEngine, the Platform-as-a-Service solution. It feels more complete than Elastic Beanstalk, and whole process is more straightforward.
create-react-app to bootstrap the React application itself. The
create-react-app documentation recommends using some external web server for serving both statics and the API data (in the blog post here), but I hated the solution - if I wanted to keep them running in separate environments, I would just go with the Cloud Storage solution.
The first step was to initialize the main package, where to whole application will live:
$ npm init
This will create the default project structure for us, fill out the fields like repository, version, author, license, etc. Let’s just install some minimal dependencies:
$ npm install --save express
Not much, isn’t it? Fortunately, Express comes with a middleware to serve statics (in fact, it’s the only middleware that is provided by default), so the whole static-serving stuff will be pretty easy to do. Before we write the actual serving code, let’s initialize the application that will run in the browser:
$ npm install -g create-react-app $ create-react-app client
create-react-app scripts, for example for development server:
$ cd client $ npm start
or to build the application:
$ npm start build
You will have all the benefits of a regular React application, like auto-refresh or JSX compilation. Once you have that ready, you can write the actual server script:
As you can see, we’re telling our server to serve statics (i.e. the built ReactJS part) from
client/build directory, so whatever path matches a file in the statics directory, will be served as static. The API part will be served from ‘/api’ path, and everything else will be serving
index.html file - this will allow us to use
react-router package. In order to run the server, you need to add one line in the main
This solution works for the initiali stages of the project and gets the job done, but it’s far for perfect. Sure, it allows to move fast and run within a single server, but the statics should be served with a dedicated solution, ideally with a CDN. With solution like this, the API service will be scaled along with the web page resources server, which is a waste of resources. Not to mention that for now there is no caching settings.
The other problems are with the development process, but I believe they can be addressed pretty easily. When you run the API server, the statics are run from the
client/build folder, which makes you lose all the benefits of using ReactJS goodness. It’s definitely a work in progress, not ready to publish that anywhere.