This application was created using Next.js React framework and deoployed using Zeit's Now.sh.
Clone this repo, install its dependencies and run the dev script.
git clone https://github.com/DawTaylor/chuck-norris-jokes
yarn install # npm install
yarn dev
/
Jokes categories listings/random
Random joke/random/$CATEGORY
Random joke by category/joke/$JOKE_ID
Single joke
- React + Redux
- SASS
- SSR
- Eslinter
- Husky
- Now.sh
Husky allows us to easliy define Git Hooks and was used here to define a pre-commit hook
which runs eslint
to prevent us to send un-linted code to upstream.
//.huskyrc.js
module.exports = {
'hooks': {
'pre-commit': 'node_modules/eslint/bin/eslint.js . --ext .js --ext .jsx --fix'
}
}
Server side routes need to handled for both local and Now.sh environments. We could handle it just on Now.sh side only, but this way the local environment would not work the same way the remote environment does.
// now.json
{
"routes": [
{
"src": "/random/(?<category>[^/]+)$", // Create a capture group naming it category
"dest": "/random?category=$category" // Handle it as a querystring param on the background
},
]
}
The local server is a little trickier. We need to create a custom server.js
file that would be handled by Next.sj. In that server file we create a basic express server.
Full server.js.
// server.js fragment
server.get('/random/:category?', (req, res) => {
const actualPage = '/random';
const queryParams = { category: req.params.category };
app.render(req, res, actualPage, queryParams);
});
This app was deployed using Now.sh serverless deployments. It`s a easy to use remote environment with many cool stuff like automatic SSL encryption, domain aliasing, CDN cache backed by CloudFlare and "functional" deployments which are available eahc by an unique URL.
// now.json
{
"version": 2,
"name": "chuck-norris",
"alias": "chuck-norris.adalbertotaylor.com.br",
"builds": [
{
"src": "next.config.js",
"use": "@now/next"
}
],
}