DEV Community

loading...
Cover image for Hosting Your App For Free

Hosting Your App For Free

tinegagideon profile image tinega ・3 min read

A weather application is always the first and easiest way for many developers to learn how to use APIs.Today we are going to go through the basics of creating and deploying your site build using Vue.js.

Getting Started

First we need to create a free open weather account to access their API.
To use vueCLI, we need to download and install Node.js.

Alt Text

Once the installation is completed run the following commands in the terminal.

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Enter fullscreen mode Exit fullscreen mode

creating the project

To create a project open your terminal and,run vue create weather

Alt Text
Navigate and select default using the arrow keys.

Alt Text
When completed a folder will be created with git initialized.
Open the folder using your code editor of choice.
It should show something similar to this.

Alt Text

Coding

Since it is a very small application we wont need the components folder and we are going to have to delete the boilerplate code already there in the App.vue file.

Alt Text

inside the div tag type the following code

<header>
      <h1>WeatherApp</h1>
      <input
        type="text"
        autocomplete="off"
        class="search-box"
        placeholder="Search for a city..."
        v-model="query"
        @keypress="fetchWeather"
      />
    </header>
    <main class="card" v-if="typeof weather.main != 'undefined'">
      <div class="location">{{weather.name}}, {{weather.sys.country}}</div>
      <div class="temp">{{ Math.round(weather.main.temp)}}°C</div>
      <div class="weather">{{weather.weather[0].main}}</div>
    </main>
Enter fullscreen mode Exit fullscreen mode

V-model is a directive in vue.js that interacts with the DOM,we have bind the input to a variable data stored in query.
@keypress(which can also be expressed as v-on:keypress) is a directive that listens to DOM events and runs fetchWeather method when triggered.

The following code goes inside the script tag

export default {
  name: "App",
  data() {
    return {
      api_key: "<your api key>",
      url_base: "https://api.openweathermap.org/data/2.5/",
      query: "",
      weather: {}
    };
  },
  methods: {
    fetchWeather(e) {
      if (e.key === "Enter") {
        fetch(
          `${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`
        )
          .then(res => {
            return res.json();
          })
          .then(this.setResults);
      }
    },
    setResults(results) {
      this.weather = results;
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

Viewing the app in a local server open the terminal,run npm run server then click at the localhost:8080 link.

Deployment

There are various platforms from which we can deploy our app from.But we are going to focus on netlify for today.

Alt Text
We will need to sign up for an account.i recommend signing up with github.

Netlify allows you to drag and drop the files to be deployed but
alternatively you can deploy directly from github.

Using github makes it easy to update your site since changes are made as soon as they are pushed to your repository.To do so follow the steps below

  • On the sites menu select new site from git.
  • Connect to Git Provider
  • Search for your repo/configure the netlify app on Github.
  • Build and deploy

Alt Text
Always ensure the build command is set to npm run build and the publish directory set to dist

Discussion (0)

pic
Editor guide