Node.
js
Table of Contents
Ubuntu 18.04.1............................................................................................................................................1
Install [Link]..............................................................................................................................................1
Install react..................................................................................................................................................1
Deploy React to GitHub Pages.................................................................................................................3
Eclipse Codemix...........................................................................................................................................5
React + Express............................................................................................................................................6
The expressive backend...........................................................................................................................6
The reactive front-end.............................................................................................................................8
Ubuntu 18.04.1
Install [Link]
[Link]
$ sudo apt install curl
$ curl -sL [Link] | sudo -E bash -
$ sudo apt-get install -y nodejs
$ nodejs –v
Install react
[Link]
$ sudo npm install -g create-react-app
$ npx create-react-app react-example
$ npm start
$ npm run build
Deploy React to GitHub Pages
[Link]
1) Add homepage property to [Link]:
"homepage":[Link]
"homepage": "[Link]
2) Install gh-pages
$ npm install --save gh-pages
[Link]
3) Add deployment scripts to [Link]
"scripts":{
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
}
s
4) Run deployment command
$ npm run deploy
dburd@Dell-14R MINGW64 /o/Onedrive/Documents/Visual Studio Code/DavidsPicksReactNpm
(master)
$ npm run deploy
> new-react-app@0.1.0 predeploy O:\Onedrive\Documents\Visual Studio Code\DavidsPicksReactNpm
> npm run build
> new-react-app@0.1.0 build O:\Onedrive\Documents\Visual Studio Code\DavidsPicksReactNpm
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
65.2 KB build\static\js\[Link]
7.55 KB (+1 B) build\static\js\[Link]
778 B build\static\js\[Link]
The project was built assuming it is hosted at [Link]
You can control this with the homepage field in your [Link].
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
[Link]/CRA-deploy
> new-react-app@0.1.0 deploy O:\Onedrive\Documents\Visual Studio Code\DavidsPicksReactNpm
> gh-pages -d build
Failed to get [Link] (task must either be run in a git repository with a configured origin
remote or must be configured with the "repo" option).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! new-react-app@0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the new-react-app@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\dburd\AppData\Roaming\npm-cache\_logs\2020-02-06T01_19_22_499Z-
[Link]
dburd@Dell-14R MINGW64 /o/Onedrive/Documents/Visual Studio Code/DavidsPicksReactNpm
(master)
$
dburd@Dell-14R MINGW64 /o/Onedrive/Documents/Visual Studio Code/DavidsPicksReactNpm
(master)
$
Loading failed for the <script> with source “[Link] [Link]:1
Loading failed for the <script> with source “[Link] [Link]:1
Eclipse Codemix
In Eclipse, file->new project->other->Codemix->react project
$ cd ~/eclipse-workspace/react-project$
$ sudo npm install --global react-scripts
$ sudo npm install
$ react-scripts start
React + Express
[Link]
The expressive backend
$ sudo npm install express-generator –g
$ express --view=ejs ReactNodeNew
$ cd ReactNodeNew
$ npm install
Add to /routes/[Link]
[Link]('SELECT * from events', function (error, results, fields) {
if (error) throw error;
In /server/[Link]
var mysql = require("mysql");
//Database connection
[Link](function(req, res, next){
[Link] = [Link]({
host : 'localhost',
user : 'root',
password : '',
database : 'test'
});
[Link]();
next();
});
I have also changed the “start” property of [Link]. I’m changing the start script from node
./bin/www to node [Link]. I’m running my express application in 4000 instead of usual 3000 because
create-react-app by default will run in 3000 and I’m avoiding the address in use clash.
In /server/[Link]
var server = [Link](app);
[Link](4007);
The reactive front-end
$ sudo npm install create-react-app
// Navigate inside the generated ReactNodeNew. execute the next command.
$ create-react-app frontend (client)
Inside the created “frontend” folder, you will find [Link]. This file has all the dependencies
needed for react to run. Here’s where we will do the trick. You need to add “proxy” property in the
[Link]. To tell the front-end to proxy any unknown requests to your API server, we’re adding the
proxy property. The proxy option supports HTTP, HTTPS and WebSocket connections. I’m pointing to
port 4000 as we’re running our express-application in that port.
"proxy": [Link]
In simple words, whenever you call something that is not in static routing(HTML/CSS) the frontend will
forward the request to the server mentioned in proxy.
That’s it. Your front-end is all set. Do “npm start” to start your frontend. It will run in port 3000. Now we
will display the data from express in our react.
ReactNodeNew/client/[Link]
var React = require('react');
var App = [Link]({
getInitialState: function() {
return {
members: []
};
},
componentDidMount() {
fetch('/users')
.then(res => [Link]())
.then(members => [Link]({ members: members }));
},
render: function() {
return (
<div className="Users">
<h1>Users</h1>
{[Link](member =>
<div key={[Link]}>{[Link]} {[Link]} -
{[Link]}</div>
)}
</div>
);
}
});
[Link] = App;
This is going to display all the records from your express in your
react. You can actually do much more with create-react-app. You can
find it on their [Link]! [Link]
app Hot-reloading of components has been implemented in the current
build, so you don’t have to worry about implementing it on your own.
Happy scripting!