Command line interface (CLI) tools are often much more powerful and extensible than working directly from a user-interface (UI).
Typing commands into your command line (often referenced as a ‘terminal’ or ‘command prompt’), is simply another form of communication between us humans and machines. It may look complicated and intimidating, but the intuitive things we do with our computers every day, like searching through images or documents on our computer, you can do those same things within your command line. It’s just a more direct form of communication.
If you’re new to this kind of thing and you’re already picturing something like the image below, don’t worry! This is not The Matrix.
One way to get familiar with using your command line and the Amazon Web Services CLI. Open up your terminal on your computer. I typically press the Windows key and type in the letters ‘cmd’.
Now if you’ll find your way to your Desktop directory (I usually create a Dev directory on my C: drive (more on this in a later post!) It should look something like –
Now I want you to type the command mkdir s3bucket-website into your ‘terminal windows’ (the command line). This will create a new folder called s3bucket-website. Next, type cd s3bucket-website into your terminal. This will change your current directory, Desktop, to the new directory you just created called s3bucket-website.
An important step in executing the following commands is that you have a few technologies downloaded. Make sure that you have these downloaded on your machine:
Now that you have those technologies downloaded, return back to your command line.
Type npx create-react-app . in your command line (don’t forget the period). That signifies that you would like the new React app that you are creating to inherit the name of your current working directory (in this case, the s3website-bucket directory name).
Once the React app is successfully created, we are going to deploy it to a new S3 (Amazon Simple Storage Service) bucket and host our React app designated as a website from S3. Here is a quick-start on configuring your AWS profile from your terminal. This is an imperative step in order to push your React app to the S3 bucket we will create and configure.
If you’ve downloaded Visual Studio Code by now, you can open up the React app we just created from the terminal by typing in the command code . inside the command line. Again, don’t forget the period! It will allow Visual Studio Code to open up from your current directory and files loaded ready to be edited.
Find the package.json file loaded in Visual Studio Code (toward the bottom and on the left). Edit the “scripts” section to include a deploy command. It will look like this –
Save your package.json file. We’re almost ready to deploy. We need to create the S3 bucket we will be deploying to. In our terminal, we will build the React app and deploy it with one line of code. But first we need to create the S3 bucket name first. Back in your terminal, type aws s3 mb s3://<your-bucket-name> && aws s3 website s3://<your-bucket-name> –index-document index.html –error-document error.html (and you can name the bucket whatever you’d like. Here’s what mine looks like –
- * I did forget to add the command that updates the new bucket’s parameter to automatically set the S3 bucket for ‘Static website hosting’. Again the command for that is aws s3 website s3://<your-bucket-name> –index-document index.html –error-document error.html if you have create your bucket first and now want to set the bucket for static website hosting. the index parameters included in the command sets index.html as the file that the content will be served from, and error.html will specify what file will be served if the index.html page is unable to be reached.
Lastly, we will need type our one line of code to build the React app locally so that we can deploy our ‘build’ directory to the S3 bucket where our website is hosted.
Type yarn build & yarn deploy in your command line.
You should see that your React app had built successfully and that your aws s3 sync command had copied the build folder locally to your S3 bucket. the –acl public-read parameter will make your React app publicly viewable as well.
You can now go to the AWS console to see the settings applied to your S3 bucket now. You should be able to see a check mark below the ‘Static website hosting’ property now –
You can click into the Static website property to view your static website link –
And voila! I know that was a lot, and hopefully gave you an idea of the power of the command line, but here’s a cool way to get started with the AWS CLI and deploy a publicly viewable React app to your S3 bucket. The end product –
Resources mentioned in this article:
