Showing posts with label Website. Show all posts
Showing posts with label Website. Show all posts

10/14/2016

Steps in uploading your MeteorJS project to Heroku with GitHub CI

Assuming that you already have a MantraJS or a MeteorJS project and you are wondering how to make your project available online because you are tired of running it on localhost. Well today, I will show you the step by step guild on how to deploy your Meteor or Mantra JS application to Heroku.

Why Heroku?

There are 2 reasons why:

1. They have a free plan that is good enough for testing or starter projects.

2. They have an easy to use interface.

So let's get on with it. Since we will be using GitHub as our CI (Continuous Integration), it is important that you push your project to GitHub, here is the guide on how to do it.


Creating a GitHub Repository


1. Login to your GitHub account or sign up if you do not have an account yet.

2. Create a new GitHub Repository by clicking the button "New Repository" on the right hand side of your GitHub dashboard.

Uploading your MantraJS or MeteorJS project to Heroku and GitHub Step by Step Guide
Creating Repository 1.1


3. Fill out the Create New Repository Form

4. You can use either public or private option; however, the private option has payment.

5. Make sure the "Initialize this repository with a README" is UNCHECKED so that the repository will not be initialized or created automatically.

Uploading your MantraJS or MeteorJS project to Heroku and GitHub Step by Step Guide
Creating Repository 1.2: Step 3, 4  and 5
Just leave the "Add .gitignore" and "Add a license" option below to None.

6. Then click the button "Create Repository".

7. You will be given a guide on how to add the created GitHub repository to your project. (DO NOT CLOSE THE WINDOW YET)

Uploading your MantraJS or MeteorJS project to Heroku and GitHub Step by Step Guide

Uploading Project to GitHub


1. Open your terminal or CMD if you are using Windows Operating system.

2. Go to the folder or directory where your project is located via terminal or CMD.

3. Once you are inside the project folder, go back to your web browser and open the guide on how to create GitHub repository to your project. Follow the steps highlighted on the screenshot below.

Uploading your MantraJS or MeteorJS project to Heroku and GitHub Step by Step Guide
Creating Repository 1.3
NOTE: If you are using MantraJS or any project that has or uses NODE MODULES, you need to create a ".gitignore" file inside your project folder and inside the file just put "node_modules" (without double quotes). This will make the push or upload faster.
  • echo "# SampleProject" >> README.md - This will create a file named README.md inside your project folder.
  • git init - this will create a folder ".git" where your GitHub configuration is being set up.
  • git add README.md - You are notifying GitHub that you made changes to your git repository by adding a README.md file. However, since we will be adding our whole project files to git, you have to use "git add --all" instead of "git add README.md".
  • git commit -m 'first commit" - You are saving those changes you added. You can change the string "first commit" to any message you want (of course it has to be related to changes you made).
  • git remote add origin https://github.com/neilakoh/SampleProject.git - you are adding and connecting your remote git repository to your local git repository.
  • git push -u origin master - You are now uploading your files to your remote git repository (GitHub).
You will be asked to enter a username and password, just enter your GitHub username and password and it should go through.

Deploying your project from GitHub to Heroku

1. Login to your Heroku account

2. Click the button "Create New App" / "Create App".

3. Enter the name of your app (I named it "aboutonline") and select a runtime region (choose United States if you are outside Europe).

4. Click the button "Create App". You will be redirected to the "Deploy" page.

5. Under the "Deployment method" section click the option "GitHub". See screenshot below.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Selecting the GitHub CI

6. Under the section "Connect to GitHub", just search the repository of your application. In this guide I created the repository with the name "SampleProject".

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Searching the GitHub Application Repository

7. Click the button "Connect" on the right hand side of the search result if your app is successfully located.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Search Result if the repository is successfully located

8. Click the "Settings" at the top menu.

9. Under the section "Config Variables" click the button "Reveal Config Vars". This is where you add the ROOT_URL and the MONGO_URL of your application.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Location for MongoURL and RootURL configuration

10. On the first box enter "ROOT_URL" or "MONGO_URL" and on the second box enter the value of your"ROOT_URL" or "MONGO_URL" and then click the "Add" button. See image below.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Connecting your application to your domain name or web address and database

NOTE: Your domain name or web address is located at the bottom under the section "Domains"

11. Below, under the section "Buildpacks" click the button "Add Buildpack"

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Adding buildpack necessary to run your application on the web

12. A pop-up box will show up, just add the line below and click "Save changes":

https://github.com/AdmitHub/meteor-buildpack-horse.git

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Adding the buildpack URL

13. After adding the buildpack, go back to Deploy page.

14. Click the check box "Wait for CI to pass before deploy".

15. Click the button "Enable Automatic Deploys".

16. Click the button "Deploy Branch".

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Final Stage in deployment process. Step 14 to 16

This will build the application from your GitHub repository and point it to your ROOT_URL (web address) and MONGO_URL (database). Once it is done deploying your application you should be able to see your website when you access your domain name.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Finish result
17. Done

Please comment below if you have questions, thanks.

9/27/2016

Adding custom domain to your blogger blog the simple way.

Blogger is the most common online blogging platform out there today being used by many,  because it is easy to use, easy to add a theme, lots of free themes available online, easy to tweak, and of course it is connected to Google.

Having all that is not enough if you do not have a good domain name for your amazing blog. Today I will teach you the 6 simple steps on how to get your domain name connected to your blogger.

1. Go to your blogger dashboard

2. On right hand side of the page beside the button "View Blog" click the arrow pointing down.

3. Click the option "Settings" from the drop down menu.

How to connect your blogger to your external domain name the simplest way
Step 2 and3 Locating the settings of your blog

4. On the Settings page under the section Publishing click the link "Setup a 3rd party URL of your blog".

How to connect your blogger to your external domain name the simplest way
The link where you can add your external domain name

5. A box will show up where you can type in your domain name. On the box just type in your domain name that you bought from  a hosting company or somewhere. Note: There should be a "www" before the domain name like "www.sampledomain.com".

6. Click the button "Save" and this should give you an error saying "We have not been able to verify your authority to this domain. Error 12".

How to connect your blogger to your external domain name the simplest way
Step 5 and 6 Screenshot
Below the error is where you can find the instruction and the information you need to connect your domain name to your blogger.

How does these two information work?

The "www" and "ghs.google.com" is the hosting space of your blogger, this is where your domain name will point to when people view your blog.

The "kofxljfghpnr" and "gv-ijme7b7ro4yfk3.dv.googlehosted.com" are random IDs used for domain verification and monitoring. These IDs will be used to monitor your domain name if it is still active or not.

How do I use these information to my domain name?

The easiest way to use it is through setting up a subdomain name. Here are the steps on how you can do it. Let say you have a domain name called "amazingblog.com" registered under Godaddy or 1and1 or CrazyDomains and so on, what you need to do is:

1. Create or setup a Subdomain name called "www" under "amazingblog.com". The subdomain name should now look like "www.amazingblog.com" after it is created.

2. Access the DNS Settings of your subdomain "www.amazingblog.com".

3. Change the CNAME of the subdomain "www.amazingblog.com" to "ghs.google.com".

4. Create another subdomain and name it "kofxljfghpnr" so the second subdomain should now look like "kofxljfghpnr.amazingblog.com".

5. Access the DNS Settings of your subdomain "kofxljfghpnr.amazingblog.com".

6. Change the CNAME of the subdomain "kofxljfghpnr.amazingblog.com" to "gv-ijme7b7ro4yfk3.dv.googlehosted.com".

7. Done

NOTE: Each hosting or domain registrar company has different control panels and different ways of handling CNAME and subdomain names. If you are not familiar on how to create a subdomain name or setting up CNAMES, you have to contact their support for assistance or walk-through.

How long does it takes for the domain name to go live with my blog?

Most of the time it is instant after you click the button "Save". If your domain name or blogs does not go live after a day then you might need to check your subdomain names and CNAMEs for typos and then check your domain name status if it is active or being on hold due to some company policy issues.

Hope this topic helps, if you have further questions regarding this topic, please comment down below. Thanks