A few weeks ago I found myself building a simple app, a prototype actually. It has a nice interface to request that a certain job (or multiple) be executed in the background. It also provides real-time updates about those jobs. Nothing that you can’t do with JavaScript. I quickly settled on a node.js back-end with a React front-end and a socket.io channel in between.
This post is about how I set up my solution and my dev environment to nicely bundle my client and my server together to make everything work smoothly locally (including the compound end-to-end debugging) as well as to be ready for production deployment to heroku.
The overall solution looks like this:
1 | solution/ |
The first three things that I did after I created the solution
folder were:
1 | & cd solution && npm init |
In development, I would like my client
to start up using react-scripts
with webpack server on :3000
with hot reloading and other awesomeness. In production, however, my server
will be serving up all front-end assets. And it will run on a different port locally when executed side by side with the webpack server. From server/app.js
:
1 | const app = express(); |
First, I installed concurrently
in the root of the solution
so that I could run both server
and client
with one command:
1 | $ npm install concurrently --save-dev |
Then, I added the following command to the solution
level package.json
:
1 | "scripts": { |
Now when I do npm run debug
in the solution root, I get two processes spun up - one runs the server/app.js
on :3001
and the other one runs the client
on :3000
. I also run server
in debug mode and this will come handy when we get to setting up local debugging.
By the way, I used debug
and not start
command because I need npm start
to be the way heroku launches this setup in production where server
handles it all:
1 | "scripts": { |
I also need heroku to install all dependencies and build the front-end every time I push new version up. That’s one more npm
command in the solution
level package.json
:
1 | "scripts": { |
The client
expects socket.io
to be accessible on the /api
endpoint from the same server. From the App.js
:
1 | import io from 'socket.io-client'; |
Easy in production setting where there is only one server. This is where proxy
comes in to aid the development setup. We need to tell the webpack dev server to proxy everything it can’t handle to the server
over at :3001
. Need to add one little line to the client/pacakge.json
:
1 | { |
Last but not least, I would really like to be able to debug both client
and server
in one place. Visual Studio Code supports compound debugging since late last year. Here’s my launch configuration:
1 | { |
You will need the Debugger for Chrome extension. Now you can npm run debug
and then F5
to attach to both processes.
Nirvana.
Anthony Accomazzo’s post - Using create-react-app with a server - made it very easy for me to set it all up. I am very happy to share it a little further with a thin layer of heroku and VS code debugging.
Enjoy!