Is Create-React-App a Dead End?

Frank Zickert

create-react-app makes it easy to develop a React app. But it leaves you unsupported when it comes to deploying your app to a server.

Infrastructure-Components fill this gap. These React-components do all the technical configuration for you and let you create, start, and even deploy your React app with a single command.

Facebook’s create-react-app is an easy to way to start developing with React. It lets you concentrate on the development of your components rather than requiring you to first learn how to setup Typescript, Webpack, and Babel.

With create-react-app you can create your React app easily. And you can start it locally. So far so good.

But a web-application is not really useful if it is not online, right?

There’s just one problem: How do you deploy your app?

If you google “deploy create react app”, Facebook’s tutorial is the first result. It tells you that you need:

  • a server (yes! some hardware!) running Node.js
  • a web-server-app, like express.js
  • routing and relative paths

Of course, these things are doable. But they require you to configure the web-server. You’re leaving the easy create-react-app road now…

Do we really need a web-server? Why don’t we host our create-react-app on the cloud (for instance on AWS)?

In fact, Amazon supports serving single-page-apps directly from their Simple Storage Service (S3). Once configured, you can upload your bundled React app and a simple html file. S3 then provides a technical url (https://yourbucket.s3-website-us-east-1.amazonaws.com) serving this html file that loads and renders your React app.

Not too bad. And the setup of this one service is not too complex either. But once you want to use a proper domain, like www.your-domain.com, you have to configure some other AWS resources, too:

  • IAM (access management)
  • CloudFront (content delivery-service)
  • Route53 (custom domain setup)
  • Certificate Manager (ssl-certificate setup)

Amazon provides an extensive documentation. There are many tutorials on this topic here at Medium.com, too. But you’re leaving the easy create-react-app road for sure…

Let’s use a serverless framework, you say? It is a powerful tool to setup cloud infrastructures, you say?

It certainly is! But with great power comes great responsibility!

Serverless does not free you from configuring all the AWS resources. It just replaces the manual configuration in the AWS console by a script. All your settings go into the serverless.yml file.

And believe me, creating a working serverless configuration takes quite some time. It does not provide immediate feedback when you do something wrong. Instead, your infrastructure simply doesn’t work! Not an easy way to go.

Furthermore, you need to specify every tiny detail of the AWS resources. Really! Like I said: it is a powerful tool with myriads of parameters.

AWS, Azure, Google Cloud Platform, and the like — these provide Infrastructure-as-a-Service (IaaS). Infrastructure is not bound to a specific purpose. You can use it for anything you like. But you have to specify exactly what you want.

If you google “serverless create react app” you’ll get the tutorial of the serverless-stack guys. It is a great resource and worth reading. But it is more than 100 pages long. Once you’re through, you may call yourself a DevOps Engineer. Congratu…oh wait. We just left the easy create-react-app road again.

Is there no way to deploy a React app without becoming a DevOps Engineer first? Is create-react-app a dead end?

Let me suggest a way out. I call it the Architecture-as-a-Function road.

Infrastructure-Components provide simple React-components (aka functions) that let you specify the architecture of your app — not it’s infrastructure.

The architecture resides at another level of abstraction. You just tell your app to be a <SinglePageApp /> or an <IsomorphicApp />. That’s it!

You don’t need to specify and configure all the technical details. It is sufficient to specify that you want to create a <SinglePageApp />.

You don’t need to specify that your files on S3 need to be accessible through the internet. Of course they are.

You don’t need to specify that the index.html loads the script that contains your React app. What else should it load?

You don’t need to specify that the domain you registered points to that index.html. Absolutely!

You don’t need to… I think you see my point.

Infrastructure-components are functions, like any other React-component. A function serves a very specific purpose. The component <SinglePageApp /> does one thing: create a single-page-app. You don’t need to care about how it works internally. You just work with its returned output.

Let’s have a brief look at Infrastructure-Components in action:

  • You export a <SinglePageApp /> component as default in this file
  • You specify an <Environment /> that specifies a runtime environment that you can start locally or deploy. You simply connect your domain with the environment.
  • The <Route /> component (you can use more than one) lets you easily serve different routes.
A serverless single page app with created with infrastructure-components

Now, let’s talk about how to create, start (locally), and deploy this app with a single command.

  • At www.infrastructure-components.com, you can create the boilerplate code of a customized Infrastructure-Components project.
  • Download and unpack your boilerplate code
  • Inside of the project directory, run npm i. Depending on your system, you might need to use admin rights (sudo) when installing packages.
  • Create a technical IAM user with these rights
  • Put the user’s credentials into your .env-file:
AWS_ACCESS_KEY_ID=***
AWS_SECRET_ACCESS_KEY=***

You’re now ready to go!

  • Build your project: npm run build
  • Start your project locally: npm run {your-project-name}
  • Deploy your project: npm run deploy-{your-env-name}

Note: you need to build your project at least once before you can start or deploy it.

You can also connect your own custom domain to your app. This post tells you how.

That’s it!

With Infrastructure-Components, you can concentrate on developing your React app.

You don’t need to become a DevOps Engineer first.

Support and Resources

Infrastructure-Components are under active development. If you find a bug, your deployment throws an error, or when need support of any kind, please report at https://spectrum.chat/infrastructure. Thank you!

Our Documentation describes how to use Infrastructure-Components in more detail.

Infrastructure-Components are open-source! So have a look at our GitHub-repository.