Difference between revisions of "User:Saul/Realtime app"
(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.
Contents
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