There have probably been plenty of these types of blog posts. Alas, I am going to include my own. In this article we will look at:
- Creating a new Typescript Application ready to code
- Deploying it to Google Cloud Platform Free Tier
- Previewing the results.
All this with just 3 commands.
So if you are not bored of the same boring old "let's create an app" then carry on reading!
This article assumes you are starting from scratch. However, if you already have a project on Github, then this article still works, just git clone your project instead.
Why are you doing this? FOOL!
I bought a boxing bag. I mean, I'm no professional boxer, I wouldn't even say I'm an amateur boxer. That said, I do know of the "Boxing numbers" system that is used universally.
I began searching for an app that will "instruct" me on which number combinations to use when boxing.
To my utter astonishment (it wasn't really astonishing) there were no boxing "numbers" apps available. That leads me to where I am right now. Enter, my journey into creating a new app.
First of all, I kind of wanted to start producing my app and have it deployed at a free tier straightaway.
Choosing the right service provider
Now, if you have a rubbish computer, like me. You could, in theory, do this all online. I'll be approaching this project with that theory in mind. Make your way over to the google cloud platform dashboard.
Click on the little console thingy in the top right-hand corner. This will open up a VM that gives you a little bit more control over the remote environment.
Let's not reinvent the wheel
Now, those of you viewing this post are probably looking to flex their programming muscles, if that's you, you can create your app first, get it on GitHub and then use git clone instead of what I'm about to show below.
Let's use Create React App (CRA) to create the boilerplate code for us to focus on the shiny stuff.
To use CRA, one simply has to call it and provide a name for the project. In the case below, I am making sure that typescript is used. ... I'm twisted like that.
Once all the bells and whistles are installed, change into your shiny new project folder and run an install. Don't do anything fancy just yet, let's get her online first.
Once you have run an install, you may get an audit report from NPM. But you should be able to type "npm start" to get the server up and running. It will try to run on the oft overused port 3000, let it be changed, and note the port number it has been changed to. Hit the preview icon on the top left-hand corner of the console view and specify the port number before selecting preview.
Congratulations, you've just "deployed" to google cloud services... Admittedly... You haven't "deployed" properly, but it is running on a computer other than yours. You cheeky boy.
So Err..... That Kinda sucks. What's next?
Well, what we've done is basically put our project in the cloud, nothing that fancy. It isn't deployed because only you can preview it. This is the bit where, if like me, you used CRA to create a boilerplate, you can now edit it straight from Google Cloud Platform by selecting Open Editor. You can now get giddy with joy as you change the text and watch as it changes in the preview.
In The Next Exciting Episode
But you probably want it to persist somewhere right? Well, stay tuned for the next exciting episode. Where we look at actually deploying and pushing changes to GitHub in 5… 3… 8… 2… Err, a few easy steps!
