For those who grew up in the 1990’s, modern web development sometimes feels like massive overkill. It’s now all about SPAs (single-page applications) with complex javascript frameworks, but let’s be honest, does everybody actually need it?
From an end-user perspective, for most use cases (corporate front-ends, forums etc), the old paradigm of static pages and hyperlinks could just do the job perfectly. Simple stuff, quick loading time. But at the same time, end users now expect fancy animations and modern UIs, which are currently mostly provided by libs and packages that are designed for SPAs.
One of the things from the old ways I miss the most is simple routing: just store your files in a tree structure and that reflects your application routes. I was talking with a friend about this and he told me about Next.js simple routing, this is how I discovered this “React add-on”.
I did my research, played with the framework a bit. If you are working with React, here are Next.js selling points (which I checked for myself):
- simple routing : “the file-system is the main API. Every
.jsfile becomes a route that gets automatically processed and rendered” (from the website). - hot code-reloading: only the pages in use are loaded, which means very fast hot reloading when you’re working in your dev environment.
- “hybrid” server-side rendering: the initial load fetches a pre-compiled page which means it’s faster and SEO-friendly. Updates are then handled by the browser (as usual for all SPAs).
I have to say I’m really pleasantly surprised, since I finally have the feeling that I can work with React, build a complex app, have simple and intuitive routing out of the box, and a “fast-loading” feeling for end users thanks to lazy-loading and the ability to off-load a part of rendering to the server (with distribution possibilities if you’re planning for thousands of visitors).
I’ve decided to use Next.js on my next project, in the meantime, I hacked around a seed React/Next.js application, here is the full docker-compose.yml:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| version: '2' | |
| services: | |
| nginx-front: | |
| image: nginx:stable | |
| ports: | |
| – "3000:80" | |
| volumes: | |
| – ./nginx-front.conf:/etc/nginx/nginx.conf | |
| links: | |
| – front | |
| – back | |
| front: | |
| image: node:8.7-alpine | |
| command: ["/bin/sh", "-c","cd /home/app && npm run dev"] | |
| ports: | |
| – "3001:3000" | |
| environment: | |
| REACT_EDITOR: atom | |
| volumes: | |
| – ./front:/home/app | |
| back: | |
| image: node:8.7-alpine | |
| command: ["/bin/sh", "-c","cd /home/app && npm run dev"] | |
| volumes: | |
| – ./back:/home/app | |
| environment: | |
| PGUSER: ${PG_USER} | |
| PGPASSWORD: ${PG_PASSWORD} | |
| PGDATABASE: ${PG_DATABASE} | |
| PGHOST: postgres | |
| links: | |
| – postgres | |
| postgres: | |
| image: postgres:9.6 | |
| environment: | |
| POSTGRES_DB: ${PG_DATABASE} | |
| POSTGRES_USER: ${PG_USER} | |
| POSTGRES_PASSWORD: ${PG_PASSWORD} | |
| volumes: | |
| – data:/var/lib/postgresql/data | |
| – ./db:/init | |
| pgweb: | |
| image: sosedoff/pgweb | |
| command: pgweb –readonly –bind=0.0.0.0 –listen=8081 | |
| ports: ["5000:8081"] | |
| links: | |
| – postgres:postgres | |
| environment: | |
| – DATABASE_URL=postgres://${PG_USER}:${PG_PASSWORD}@postgres:5432/${PG_DATABASE}?sslmode=disable | |
| depends_on: | |
| – postgres | |
| volumes: | |
| data: {} |
And here is a link to the full github repo:
https://github.com/francoisruty/fruty_reactjs-nextjs
Just clone it and follow the instructions. You’ll have a full dev environment of a basic React/Next.js application, with a database, a basic ExpressJS API, and an nginx front-end server for routing.
Enjoy!
Tech from the Front Line 
Thanks for the docker-compose file 🙂
LikeLike