From the very first step of coding to deploy

Photo by Ben Kolde on Unsplash

You want to start coding and publish it to the world but have no idea what to do? Some websites show how to start coding from the very first step but do not explain how to actually publish it to the world, deploy. But on the other hand, some websites show how to deploy complicatedly. Beginners who created basic HTML and CSS get the result by their editor's extension but it does not mean they published them, then they get stuck. In this article, I'd like to explain how to start coding, and deploy it to the world.

1. Get ready for coding

What you need for coding are as follows.

1. PC
2. Internet Connection
3. Editor

Way simpler than you expected, eh? You do not need to have your domain, server, or other come complicated things. If you got all of them, you are ready to dive into the coding world. If you are reading this article, I assume you already got the first two, so let me explain from the third one, Editor.

Install an editor

You have lots of options to choose. One of the most common editors is Visual Studio Code. This is provided by Microsoft and the UI is very simple, but super functional at the same time. Big advantage of using a popular editor is that you can easily find out the solutions for any troubles. It is sometimes takes a lot of time to add some useful extensions and fix troubles of editor.

First things first, let's install an editor.

Visual Studio Code - Code Editing. Redefined

Visit the link above and click the Download button and install it. It should take about a few minutes to complete.

Set up directory

In coding, file organization is very important. Big project will contain a huge amount of folders and files and poor file organization will lead you to an annoying maze. Thus, it would be a good idea to create your project folder to organize files in your computer.

Let's create a directory you want for your project.

Project directory

This time, I created a directory named "startCoding", where all files and folders are put. As your project gets bigger, the project directory might include multiple files and folders that contains some more files and even other folders.

Create HTML, CSS, Javascript files

In the directory you created, let's create three basic files with extensions of html, css, js.

There are several ways to create files into a directory. Using terminal(for Windows user, command prompt) is one of them and worth learning in terms of coding. First, open Terminal(for Windows user, command prompt) and move to the directory that you created earlier by cd [path]

Change directory command

Once you moved the directory, you should see the directory name on your command line.

Changed directory

Then it’s time to actually add files. Put touch [file name] (for Windows user, copy nul [file name]) on the terminal.

add file command

For the very basic project, let’s create index.html, style.css, and app.js files into the directory.

Project directory with basic files

If you are able to create these three files in your directory, it is finally time to dive into hands-on coding. This is where the fun part begins!

2. Start happy coding by Visual Studio Code

When you first open the editor, you will see this screen.

Start screen of Visual studio code

Click the Open folder and then choose the directory you created, then click Open.

Choose project folder on Visual Studio Code

Then this screen will be shown and you are now free to edit the files whatever you like by clicking a file.

Project page

Before putting some code, let me introduce a powerful extension called Live Server. On the bottom of the side bar, you should see extensions button. Click it, search for Live Server from the field, and install it.

Live Server extension

On index.html, if you type ! and press Enter, the basic frame work of HTML will be put on the editor. Suggestion function is very convenient because you do not need to remember the certain syntax, but it is very important to be able to build up them without these auto fill. So, I recommend you to type all of them by yourself until you remember them.

For the very first code, it is very common to print out the phrase “Hello World!” to the screen. To print out “Hello World!” on the screen, let’s type h1 tag which stands for heading 1 under body tag.

<h1>Hello World!</h1>

h1 tag

By surrounding a string by <h1></h1> , the string will be displayed as a heading. Heading tag has 6 kinds of them from h1 to h6 and the number goes larger, the font size gets smaller. You want to see the result? It is easy. Just click Go Live button at the very bottom of the window and one of web browsers will be launched to show the result of the code.

First output

The screen you see looks like an actual website, but has not actually published to the world yet. The only step left is to deploy it. You are getting close to the end!

3. Deploy

What is it to deploy? Let’s see the meaning.

deploy: bring into effective action; utilize.

In our field, deploy is basically used as an action to put project files into server and make them actually “usable” as a source of an website. If you deploy your project, it is put on a server and hosting URL will be created to access it. Let’s see how to do it step by step using google firebase.

Firebase

Create a firebase project

First, visit google firebase and click Create a project on the very first page.

Create a project on firebase

Then follow the steps shown on screen until you reach Create react button. On the way to it, you will be asked to decide the project name, allow google analytics, and choose analytics location. You can choose whatever you want and just continue.

Complete create project

After completing creating a project, click the gear icon on the side bar and choose Project settings. Then if you will see the screen like as follows, click the pencil icon on the Default GCP resource location. You will asked to choose cloud resource location, so choose one of them.

Now go back to project settings and scroll down until you see “Your apps” section, then click the icon of the triangle-ish one. Then choose your App nickname and make sure to check the checkbox of “Also set up Firebase Hosting for this app”. After that, keep going until you see “Continue to the console” button.

From now on, you will work on terminal(command prompt) to deploy your project. Open terminal, change directory to your project directory, and put these commands below.

npm install -g firebase-tools
npm install --save firebase

By executing these commands, tools to use firebase functions will be installed locally and your computer will be ready to connect to firebase.

Then execute the command below.

firebase login

When you execute this command, a browser will be opened and you will be asked to log in to a google account. You are good to go if you see this screen

Now let’s go back to terminal and execute next command.

firebase init

When you execute the command, you will be asked to choose which firebase features to use for the project, then cheese the third and fourth ones.

After you choose these two, the terminal will ask your preferable language, JavaScript/TypeScript, ESLint setting, and some other thing. For the very first project, which actually does not contains lots of contents or sensitive information, it is ok to choose default setting like as follows.

However, if you want to work on a directory that you manually created, like src directory, you need to change the “public” into the specific directory.

Then, finally it is time to actually deploy by this commands.

firebase deploy

If all goes well you will see a hosting URL like this.

By putting the URL in an address bar on a browser, you will see what you create on the web.

Conclusion

You’ve got it! It looks we have gone so far and taken huge amount of steps to publish a webpage to the world, but this is the way things go. A lot of things to learn still remains and no one is able to learn them all. The accumulation of single step will lead us to the wider-open world, where we can make our creativity a reality.

Thank you for reading and have a happy coding life:)