https://github.com/jill6666/weather-app-ssr
Implement server-side-rendering with React and deploy on Heroku.
https://github.com/jill6666/weather-app-ssr
babel express heroku-deployment javascript react server-side-rendering ssr webpack
Last synced: about 2 months ago
JSON representation
Implement server-side-rendering with React and deploy on Heroku.
- Host: GitHub
- URL: https://github.com/jill6666/weather-app-ssr
- Owner: jill6666
- Created: 2021-07-21T00:23:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-18T03:41:45.000Z (over 3 years ago)
- Last Synced: 2023-08-03T05:07:45.647Z (almost 2 years ago)
- Topics: babel, express, heroku-deployment, javascript, react, server-side-rendering, ssr, webpack
- Language: JavaScript
- Homepage: https://weather-app-ssr.herokuapp.com/
- Size: 1.62 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather-App-SSR
## Prequsitions
- react 16.10.1
- nodemon ^2.0.12
- express ^4.17.1
### Run in shell
```shell
$ npm install
$ npm run dev:server
$ npm run dev:build:server
$ npm run dev:build:client
$ open https://localhost:3000
```
### Description
- Impletment server side rendering by fork PJChender's project. [link](https://codesandbox.io/s/weather-app-add-dark-mode-feature-3e3u5)
## Note
The moment data is hardcode not fetch the real data.
## Deployment
### Heroku
#### Initialization
1. Create a project on Heroku website
2. Download [heroku cli](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)
3. Login and set config
```
$ heroku login
$ heroku git:remote -a ${project name}
```
#### Test in local
```
$ heroku local web -p 3000
$ open http://localhost:3000
```
#### [Deploy to heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app)
```
# push to heroku remote and it will tirgger deployment
$ git push heroku main
# open project URL
$ heroku open
# see logs of the app
$ heroku logs --tail
```
#### Roadmap
- [ ] preload weather data before the render
- [ ] get user's location and fetch the real weather data
Note for Troubleshooting
- [Why is my Node.js app crashing with an R10 error](https://help.heroku.com/P1AVPANS/why-is-my-node-js-app-crashing-with-an-r10-error)
- [Node.js FAQ](https://help.heroku.com/P5IMU3MP/heroku-node-js-build-script-change-faq)