In this post, we will be looking at how to deploy a web application for free on the internet. With the help of this article, even if you have no knowledge of programming, you will be able to become a real application owner by following the instructions. Deploying web applications for free on the internet is a wonderful thing!
Previously, we discussed how to become a game developer with ChatGPT and how to use ChatGPT to quickly create a simple paint web application in seconds. However, in those articles, we didn’t discuss how to publish these applications on the internet in order to keep things simple.
Why is it important to deploy an application online?
When we prepare the codes of an application, we can only run it on our own computer. If we have an app that is good enough, we want to share it with other people in the world.
Since many people around the world have internet access nowadays, publishing the application on the internet makes it much easier for them to access it. By publishing your applications on a website, you can reach almost the entire world and share your product with everyone. This can make you even a business owner.
Deploying the Application
We will be discussing how to take the application that we have prepared in 5 seconds using ChatGPT and launch it live. Therefore, if you have not reached this page from that page, I strongly recommend you take a look at that post first.
This application is pretty simple and consists of only one file named index.html. Some applications in real life are of course much more complex and have different file types, but since everything we will be discussing here applies to them as well, you can apply this information to all of them.
Table Of Contents
- Creating a Git Repo: Creating a git repository within our application and committing our code locally
- Introduction to Node Package Manager: Using Node package manager, we will see how to install various packages in our application
- Getting familiar with Parcel Build Tool: To build our application in the live environment, we will be using the lightweight parcel package
- Creating a Repo on our Github account: Creating a repo on Github, which is a portfolio for developers, to move our code from local to cloud
- Creating our Netlify account & Building the Application: Using Netlify, a cloud application, for our build and deployment processes. Then we will build our application and deploy it to the live environment. for free
1. Creating a Git Repo
You may not have heard of Git before. So let’s first understand what Git is. Git is a version control system used in software development processes. With Git, you can take step-by-step versions of the projects you are working on and easily return to those versions later when you need them. I will not go into the history of Git, but it is widely used as an important tool in the software world.
For developing our Paint application, we used Microsoft’s Visual Studio Code program. VSCode comes with a built-in git extension, which makes creating a git repo very easy. All we need to do is click on the source control icon located under the magnifying glass in the left window and select the option to initialize the git repository. This process creates a file that will store versions of our code in the background.
Simply initializing the Git repository is not enough. We need to send the code we have previously prepared, or in other words, the code that ChatGPT delivered to us in 5 seconds, to the opened git repo. To do this, we will need to perform a commit.
Committing
You may not also have heard of committing before. In short, the word commit means to process and it is an action we take to save data to a git repository. This can be easily done through VSCode’s built-in source control tool. We go back to the window where we previously initialized the git repository and write a short message summarizing the action we have taken and press the commit button.
In software development processes, the commit messages we prepare are actually very important because they help our team members working together to understand the actions we have taken and help us quickly remember the actions we have taken when we look back.
2. Introduction to Node Package Manager
Node Package Manager, or npm for short, is literally a package manager. Since we will be using various packages during the deployment process of our application, we will need npm for steps such as installing and running these packages.
First, we need to check if npm is already installed on our computer. To do this, I open a terminal on Mac and run the command npm -version. If a version appears, it means that I already have npm. Windows users can also check this in a similar way by using the command prompt.
If you see that it is not installed on your computer, you need to install Node.js. This is a very simple process, you can easily find detailed information on how to do it online.
Initializing NPM on the project
After seeing that npm is installed on our computer, we need to initialize it on our project. This process will create a simple template file and will store the version information of the packages we install as well as the details of our project.
To do this, I open the terminal tab on VSCode and run the command npm init -y on the screen. You can use thousands of resources online to learn more about what this command does in detail. In short, we will create a default package.json file. After running the command, I can see that this file has been added to my project.
What is the package.json file?
The package.json file is actually a simple configuration file in JSON format that shows general information about our project and the dependencies of our project. By examining its content, we can learn more about this information in more detail.
Since we created this file in the default way, I delete the line “main”: “index.js” in its content. Because our project’s main file is not index.js but index.html.
3. Getting familiar with Parcel Build Tool
Parcel is actually an open-source bundler program. By adding this program to our project, we will bundle our files and build and deploy them to the live environment. There are actually many similar build programs on the market, one of the most popular being Webpack. However, Parcel is much more lightweight and easy to use, so I chose it.
To add Parcel to our project, we will install it using npm by typing npm i parcel in the VSCode terminal window.
After this process is completed, two new files, node_modules, and package-lock.json, will be added to our project. These files are used by parcel, with the latter keeping track of the versions of other programs that parcel utilizes
It’s important to note that the node_modules file is a folder that contains the code of the programs our project depends on. Therefore, we don’t need to move it to our production package because it can be easily reinstalled. For this reason, we create a file named .gitignore in our project.
Then added the node_modules folder to it.
What is the .gitignore file?
.gitignore file is a special file used in Git version control system. It is used to define files, folders, and subfolders that should be ignored and not added to the git repository during the version control/tracking process.
If we have successfully completed all the steps so far, we can move on. At the beginning of the post, we initialized the git repository for our project and made the first commit. However, since then, new files such as package.json have been added to our project. To include these new files in our version, we perform a second commit operation. We go back to the VSCode source control window, write a message and press the commit button.
Note: As previously mentioned, commit messages are very important for understanding the actions taken. In real life, meaningful messages such as ‘npm file created’ and ‘parcel package installed’ should be more appropriate.
If you’ve made it this far, give yourself a round of applause before moving on to the next step, please!
4. Creating a Repo on our Github account
For those who don’t know, GitHub is a cloud application that hosts our git version control system used in our project. Thanks to GitHub, our code versioned with git is not only stored locally on our computer but can also be uploaded to the cloud. This allows us to access the code from anywhere in the world if desired.
In order to create a repository on GitHub, we first need to create a GitHub account. This step is quite straightforward, so I’ll leave it up to you to create one. Once you have created a GitHub account, go to the main page and click on the plus button in the top right corner, then select “New repository”.
In the new window, give your repository a suitable name, and specify whether it will be public or private. After filling in these details, you can click on the “Create repository” button at the bottom.
We’ve successfully created an empty repository on GitHub. The following is what it looks like after creation.
Now, we want to upload the project that we’ve made on VSCode. To do this, we copy the code under the “push an existing repository from the command line” option on the main page of the repository we created, and paste it into the terminal window on VSCode.
This process uploads the code from our computer to the GitHub repository. After the process is complete, you can refresh the page on the GitHub repository to see the changes.
5. Creating our Netlify account & Building the Application:
Netlify is a cloud-based platform that allows us to build and deploy our applications on the web. It offers free hosting for applications with limited traffic enough, making it ideal for projects that don’t have a lot of visitors yet. But if your projects become popular and attract a lot of visitors, you can always upgrade to a paid plan and have access to more resources.
After creating your Netlify account, we need to go to the Sites option and select Add New Sites.
In this step, it will ask us which cloud-based repository we want to use. Since we are using GitHub, we continue with the GitHub option. In the opened screen, it will ask for access permission to your GitHub repositories. You can either allow access to all of your repositories or just the new repository you want to deploy.
Then, in the opened window, it will ask you which options you will use for the build. The build command option is important here because if you enter it incorrectly, the build process will not be successful. Since our main file is index.html, we change the option to parcel build index.html here and proceed with the process.
After selecting the Deploy site option, the deployment process starts, which takes about 20-30 seconds. And if no errors are encountered, our application is deployed on the web. Netlify gives a website name of its own for the start, but you can change it at any time as you wish.
Let’s make the website name of our project a bit more meaningful. To do this, you need to go to the Options option under the Domains tab and select Edit Site Name. In the opened window, you can enter the domain name you want, and if it hasn’t been taken by someone else, you can start using it. For this example, I changed the address to chatgpt-paint-website.
Great! We have successfully completed all the steps. If you have come this far, don’t forget to give yourself a round of applause once more. You can also access the site that we deployed on this post here.
Conclusion
- By hosting our applications online, we are making them available to everyone who has internet access. This means that if our products receive enough interest, they can attract a large number of visitors and maybe even become an online business. So hosting applications for free is great!
- We have learned how to deploy the web application online using the Parcel, GitHub, and Netlify platforms.
- ChatGPT makes preparing the code for applications much simpler. With ChatGPT, we can easily generate the necessary code by simply describing in plain English the type of app we want.
That’s it! We’ve gone through everything you need to know to deploy a web application. What now? Build your own app and publish it online! Do not hesitate to ask if you encounter any problems at any stage.
Thanks for reading! I wish you a happy and cheerful day with artificial intelligence.
Leave a Reply