Difference between revisions of "User:Saul/Realtime app"

From Organic Design wiki
(Created page and added a little bit about it.)
 
(Setup: Subdivided and adding lost more info.)
(One intermediate revision by the same user not shown)
Line 1: Line 1:
 
This is the documentation for the stack I use for creating a real-time application. The stack consists of node.js and feathers.js for the server, the client uses: Vue, vue-router, vuex and setup using the vue webpack.
 
This is the documentation for the stack I use for creating a real-time application. The stack consists of node.js and feathers.js for the server, the client uses: Vue, vue-router, vuex and setup using the vue webpack.
 +
 +
== Setup ==
 +
=== Install And Generate Files ===
 +
The following commands will setup the app:
 +
<source lang="bash">
 +
sudo npm install -g vue @feathersjs/cli # install dependencies globally
 +
sudo vue init webpack-simple APPNAME # create a new project using the "webpack-simple" template
 +
mkdir APPNAME/server && cd APPNAME/server
 +
feathers generate app # generate the feathers app
 +
</source>
 +
 +
=== Modify Files ===
 +
A few changes are need to finish connecting the app:<br>
 +
<br>
 +
Copy all dependencies from server/package.json to the package.json located in the root dir. Do the same for request and request-promise from devDependencies.<br>
 +
Add to the scripts section in package.json (this allows the back end to be started via "npm run server"):
 +
<source lang="json">
 +
"server": "node server/src/",
 +
</source>
 +
Add to package.json:
 +
<source lang="json">
 +
"directories": {
 +
"lib": "server/src"
 +
},
 +
</source>
 +
Modify the dev script in package.json to:
 +
<source lang="json">
 +
"cross-env NODE_ENV=development webpack-dev-server --content-base server/public --open --hot"
 +
</source>
 +
Modify the config/default.json file like so:
 +
<source lang="json">
 +
"public": "../server/public/",
 +
</source>
 +
Modify the webpack.config.js by changing the path and publicPath like so:
 +
<source lang="json">
 +
path: path.resolve(__dirname, "server", "public"),
 +
publicPath: "/",
 +
</source>
 +
Modify the index.html so that the script build source is:
 +
<source lang="html">
 +
<script src="build.js"></script>
 +
</source>
 +
 +
=== Fix Structure, Install, And Cleanup ===
 +
These commands will finish arranging the files (make sure you are still in the server dir):
 +
<source lang="bash">
 +
mv config ../config && mv .editorconfig ../.editorconfig && mv ../index.html public/index.html # move then files to the proper dirs
 +
rm package.json LICENSE .gitignore .npmignore README.md .eslintrc.json package-lock.json -R test node_modules # delete the unnecessary files
 +
</source>
 +
And to install the dependencies and run:
 +
<source lang="bash">
 +
cd .. # go back to the project root
 +
npm i @feathersjs/client vuex # install additional dependencies (socket.io-client may also be needed?)
 +
npm i # install dependencies
 +
</source>
 +
=== Run App ===
 +
To run in development:
 +
<source lang="bash">
 +
npm run dev # this launches the front-end
 +
npm run server # this launches the back-end
 +
</source>
 +
To run in production:
 +
<source lang="bash">
 +
npm build # build the front-end into the backend
 +
npm run server # run the backend
 +
</source>
 +
=== See Also ===
 +
*[[User:Saul/linode#Setting_Up_Node.js]]

Revision as of 01:36, 19 March 2018

This is the documentation for the stack I use for creating a real-time application. The stack consists of node.js and feathers.js for the server, the client uses: Vue, vue-router, vuex and setup using the vue webpack.

Setup

Install And Generate Files

The following commands will setup the app:

sudo npm install -g vue @feathersjs/cli # install dependencies globally
sudo vue init webpack-simple APPNAME # create a new project using the "webpack-simple" template
mkdir APPNAME/server && cd APPNAME/server
feathers generate app # generate the feathers app

Modify Files

A few changes are need to finish connecting the app:

Copy all dependencies from server/package.json to the package.json located in the root dir. Do the same for request and request-promise from devDependencies.
Add to the scripts section in package.json (this allows the back end to be started via "npm run server"):

"server": "node server/src/",

Add to package.json:

"directories": {
	"lib": "server/src"
},

Modify the dev script in package.json to:

"cross-env NODE_ENV=development webpack-dev-server --content-base server/public --open --hot"

Modify the config/default.json file like so:

"public": "../server/public/",

Modify the webpack.config.js by changing the path and publicPath like so:

path: path.resolve(__dirname, "server", "public"),
publicPath: "/",

Modify the index.html so that the script build source is:

<script src="build.js"></script>

Fix Structure, Install, And Cleanup

These commands will finish arranging the files (make sure you are still in the server dir):

mv config ../config && mv .editorconfig ../.editorconfig && mv ../index.html public/index.html # move then files to the proper dirs
rm package.json LICENSE .gitignore .npmignore README.md .eslintrc.json package-lock.json -R test node_modules # delete the unnecessary files

And to install the dependencies and run:

cd .. # go back to the project root
npm i @feathersjs/client vuex # install additional dependencies (socket.io-client may also be needed?)
npm i # install dependencies

Run App

To run in development:

npm run dev # this launches the front-end
npm run server # this launches the back-end

To run in production:

npm build # build the front-end into the backend
npm run server # run the backend

See Also