Canvas Web App for React-Node-MySQL
This is a fully working canvas for a React Web App with the following characteristics:
- Based on create-react-app
- Node/Express backend
- MySQL connection
- Redux pattern for handling application-state
- ReactRouter for handling routes
- Reactstrap for UI
- Redux-Saga for asynchronous tasks
Getting this App up and running
-
First of all Install or update NVM and Node (if you haven't done so)
-
Clone this repository:
git clone https://github.com/bcbi/Canvas-React-Node-MySQL.git MyWebApp
- Set up testing database
In the terminal log in as root and used the sample.sql file included in this repo
mysql -u root
mysql> source sample.sql;
At this point you can test the actual connection to the database.
mysql> use books;
mysql> show tables;
You should get:
+-----------------+
| Tables_in_books |
+-----------------+
| authors |
+-----------------+
1 row in set (0.00 sec)
- Install server and client packages
cd YOUR_PATH/MyWebApp
npm install
cd client
npm install
- Start both server and client
cd YOUR_PATH/MyWebApp
npm start
The last lines of the output should be
Starting the development server...
Compiled successfully!
The app is running at:
http://localhost:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
You can now point your browser to http://localhost:3000/!
If you are interested on re-creating this app from scratch, we've documented most of the steps. This app was initially based on this great blog post and their repository. It may be a good idea to follow that post first, before tackling ours - which adds more features e.g., redux, sagas, routes...
Install or update NVM and Node
NVM
I used homebrew - althrough not officially supported. But I have not yet run into any issues
brew update
brew install nvm
source $(brew --prefix nvm)/nvm.sh
Follow directions on screen
You should create NVM's working directory if it doesn't exist:
mkdir ~/.nvm
Add the following to ~/.bash_profile or your desired shell
configuration file:
export NVM_DIR="$HOME/.nvm"
. "$(brew --prefix nvm)/nvm.sh"
You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/Cellar/nvm/0.32.0 will destroy any nvm-installed Node installations
upon upgrade/reinstall.
Node
nvm install node
Follow any recommendations on screen e.g
nvm use --delete-prefix v6.6.0
If your enviroment is not up-to-date
- Possibly NVM
brew update
- Get latest npm
npm install -g npm@latest
- Update global npm packages
npm update -g
Starting from scratch
Create your App folder, init repo
mkdir MyWebApp
cd MyWebApp
git init
...(add readme, commit, set up origin, push)
Set up the SERVER
- MyWebApp/server.js
The file is an example of what it may look like for a server that: * Serves at port 3001 * Uses static index.html when in production mode * Connects to a MySQL pool (pools allow handles reconnecting) * Has a server-api that the client side can talk to
- MyWebApp/package.json
Contents where borrowed and slightly modified from this file. Note: Our local copy depends on MySQL instead of SQLite
- MyWebApp/start-client.js
Contents where borrowed from this file
Test the SERVER
- Minimal testing
Within the top directory
npm install -s
npm run server
At this point you should see:
NODE_ENV: undefined
Find the server at: http://localhost:3001/
- Testing the database
In the terminal log in as root and used the sample.sql file included in this repo
mysql -u root
mysql> source sample.sql
At this point you can test the actual connection to the database.
Start your server again:
npm run server
Then, submit a query to your db - from another terminal window:
curl localhost:3001/api/books?firstName=William | jq '.'
You should see
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 71 100 71 0 0 2257 0 --:--:-- --:--:-- --:--:-- 2290
[
{
"last_name": "Shakespeare",
"first_name": "William",
"middle_name": null
}
]
Set up the CLIENT
That's what we use create-react-app for:
create-react-app client
Test the CLIENT (bare-bones):
cd client
npm start
Connect CLIENT and SERVER
The server is ready to receive queries but at this moment, there are no requests sent from the client. To do so, we create a client interface
* client/Client.js
The main function in this file doing the query is
function search(query) {
return fetch(`/api/books?firstName=${query}`, {
accept: 'application/json',
}).then(checkStatus)
.then(parseJSON);
}
* [Bootstrap Table](http://allenfang.github.io/react-bootstrap-table/start.html)
Install module:
npm install react-bootstrap-table --save
Add CSS to public/index.html (inside body)
<link rel="stylesheet" src="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.css">
</link>
Add the proxy
We need Webpack development server proxy our API requests to our API server
// Inside client/package.json
"proxy": "http://localhost:3001/",
Add Bootstrap, React Router, Redux and Redux-Saga
For Bootstrap follow this instructions
We will
React-Router hadles routing in our single-page application on the client side
npm install --save react-router
npm install --save react-router-bootstrap
Redux handles our Application (global) state
npm install --save react-redux
Redux-Saga handles waiting for our asychronous calls (similar to promises)
npm install --save redux-saga