/weather-app

Weathery displays current weather temperature, daily maximum, and minimum temperature, how it actually feels and the current time of the searched location.

Primary LanguageJavaScriptMIT LicenseMIT

Weather App

Project, which displays current weather temperature, daily maximum and minimum temperature, how it actually feels and current time of the searched location. Data is fetched from OpenWeather website. For calculating current time, I use OpenWeather provided offset related to the UTC.

Link to live version.

Screenshot

Screenshot of the webpage

Getting Started

Clone the repository into your local computer.

Installing

First you'll have to install the newest version of Node. Otherwise the npx command could not be available. Then move into the project main directory on the console and follow the instructions below.

Install all packages:

$ npm install

Run Webpack:

$ npx webpack

Now open the index.html in the browser.

You can instruct webpack to "watch" all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don't have to run the full build manually:

$ npx webpack --watch

webpack.config.js

The main file of which the bundle is created is set in the entry:

entry: './src/javascript/index.js'

The output file of the JavaScript bundle and its name is set in the output:

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },

The output file name of the CSS bundle is set in the plugins:

plugins: [
  
    new MiniCssExtractPlugin({
      filename: "main.css"
    })
  
  ]

Notice about production mode and postcss.config.js

In postcss.config.js there is a check for process.env.NODE_ENV variable. The thing is even if you set Webpack mode to production in webpack.config.js it won't automatically change Node environment variable.

The simplest way to configure this is to install cross-env package:

$ npm install --save-dev cross-env

Now when you run npx cross-env NODE_ENV=production webpack --config webpack.config.js the process.env.NODE_ENV variable will be production and postcss.config.js check is going to work:

if(process.env.NODE_ENV === 'production') {
    module.exports = {
        plugins: [
            require('autoprefixer'),
            require('cssnano')
        ]
    }
}

From Webpack documentation: Technically, NODE_ENV is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine dev-vs-prod behavior by server tools, build scripts, and client-side libraries. Contrary to expectations, process.env.NODE_ENV is not set to "production" within the build script webpack.config.js. Thus, conditionals like process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js' within webpack configurations do not work as expected.

Built With

Authors

👤 Jaak Kivinukk

Screenshot Image

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments