Weather application made with JavaScript and webpack. Uses HTTP requests to return info from a weather API, and is deployed on GitHub Pages
Javascript with Webpack project from The Odin Project curriculum
- HTML,CSS,Javascript
- Webpack
- npm manager
- HTTP Request
- Auto-populate your current location
- Change background according to the current weather
-Before running this project you will need to install webpack and configure the live server on your webpack.config file. You can learn more about it on this page.
To use this project you will need to download this repository onto your computer. Afterwards, you will need to install webpack and npm to correctly run this project. In the package.json file, input this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit >1",
"build": "webpack --mode production",
"builddev": "webpack --mode development",
"start": "webpack-dev-server --mode development >--open"
}
In the webpack.config.js
file we are going to input this config in order to use live-sync browser reloaded automatically using npm run start
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(\_\_dirname, 'dist'),
},
watch: true,
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
],
},
};
module.exports = {
watch: true,
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3001,
files: [
'./dist/*.html',
'./dist/*.js',
'./dist/*.css',
'./src/*.js',
'./src/img/*.jpg',
],
server: { baseDir: ['dist'] },
}),
],
};
To deploy the application and view it on your browser, open your project folder terminal and run these commands:
`npm install`
`npm run build`
`npm i -D webpack-dev-server`
`npm i browser-sync --save`
To run the linter files you will need to run these command on the terminal
`npm install eslint eslint-config-airbnb --save-dev`
`npx eslint --init`
`npx client`
Afterwards, open the Stickler Page and activate your repository. and activate your repository
👤 Cristian Ines Hernandez A. - MephistoDevelop
- Github: @MephistoDevelop
- Twitter: @MephistoDevelop
- Linkedin: Cristian Hernandez
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give an ⭐️ if you like this project!
This project is MIT licensed.