0. Before doing any of this, if you're using your own laptop/desktop, make sure you've got the latest versions of node and npm installed (npm v: 4.0.5 & node v: 7.4.0) :
node -vnpm -v
1. Clone this repository :
git clone --depth 1 https://github.com/nenee/weatherapp-boilerplate.git weather-appcd weather-app
2. Make it your own :
rm -rf .git && git init && npm init
ℹ️ Command above re-initializes the repo and sets up your NPM project.
3. Install the dependencies :
4. Start a live-reload development server :
npm run dev
This is a full web server for your project. Any time you make changes within the
srcdirectory, it will rebuild and even refresh your browser.
5. Generate a production build in
npm run build
6. Start local production server with serve:
This simply serves up the contents of
./build. Bear in mind, if you use this, the localhost port your server is running on will refresh, and you'll also need to restart it to see any changes you've made to the code in
The initial run will display the iPhone version (iPhone 6/7 Plus screen size); however, if you modify the path on the url bar by adding "/ipad", you can view the tablet version (iPad Air screen size).
The CSS pre-processor in use is Less. You don't have to worry about the syntax and just write in normal CSS as there are helper modules to assist you (located in
There are many weather APIs out there; this boilerplate uses WeatherUnderground, which I highly recommend for any detailed info you may need; sign up is free and you can find out more about it here : https://www.wunderground.com/weather/api/d/docs?MR=1 There's also a console, where you can check out particular responses : https://apigee.com/console/wunderground
Most importantly, have fun with it ! 👌
ℹ️ You can use URL Routing as defined here.
Pages are just regular components that get mounted when you navigate to a certain URL. Any URL parameters get passed to the component as
Defining what component(s) to load for a given URL is easy and declarative. You can even mix-and-match URL parameters and normal props.
<Router><A path="/" /><B path="/b" id="42" /><C path="/c/:id" /></Router>