git clone [email protected]:diogomiguel/url-shortner-diogo.git
cd url-shortner-diogo
npm i
cd client
npm i
cd ..
npm start
Configures a Webpack development server to run on localhost:3000. This development server will bundle all static assets located under client/src/. All requests to localhost:3000 will serve client/index.html which will include Webpack's bundle.js.
To prevent any issues with CORS, the user's browser will communicate exclusively with the Webpack development server.
This request is made to localhost:3000, the Webpack dev server. Webpack will infer that this request is actually intended for our API server. We specify in package.json that we would like Webpack to proxy API requests to localhost:3001:
Therefore, the user's browser makes a request to Webpack at localhost:3000 which then proxies the request to our API server at localhost:3001:
This setup uses concurrently for process management. Executing npm start instructs concurrently to boot both the Webpack dev server and the API server.
Inside server.js, we tell Node/Express we'd like it to serve static assets in production:
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
}
You just need to have Webpack produce a static bundle of the React app (below).
0. Setup your Heroku account and Heroku CLI
For installing the CLI tool, see this article.
1. Build the React app
Running npm run build creates the static bundle which we can then use any HTTP server to serve:
cd client/
npm run build
2. Commit the client/build folder to source control
From the root of the project:
git add client/build
git commit -m 'Adding `build` to source control'
3. Create the Heroku app
heroku apps:create url-shortner-diogo
4. Push to Heroku
git push heroku master
Heroku will give you a link at which to view your live app.
- Add real DB instead of localstorage + stratch
- Testing
- Check URL format before shortening
Full stack inspired by this