Difference between revisions of "User:Saul/Realtime app"
m (→Setup: Changed heading sizes) |
m (→Modify Files: Added bolt text for file names.) |
||
Line 14: | Line 14: | ||
A few changes are need to finish connecting the app:<br> | A few changes are need to finish connecting the app:<br> | ||
<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> | + | Copy all dependencies from <b>server/package.json</b> to the <b>package.json</b> 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"): | + | Add to the scripts section in <b>package.json</b> (this allows the back end to be started via "npm run server"): |
<source lang="json"> | <source lang="json"> | ||
"server": "node server/src/", | "server": "node server/src/", | ||
</source> | </source> | ||
− | Add to package.json: | + | Add to <b>package.json</b>: |
<source lang="json"> | <source lang="json"> | ||
"directories": { | "directories": { | ||
Line 25: | Line 25: | ||
}, | }, | ||
</source> | </source> | ||
− | Modify the dev script in package.json to: | + | Modify the dev script in <b>package.json</b> to: |
<source lang="json"> | <source lang="json"> | ||
"cross-env NODE_ENV=development webpack-dev-server --content-base server/public --open --hot" | "cross-env NODE_ENV=development webpack-dev-server --content-base server/public --open --hot" | ||
</source> | </source> | ||
− | Modify the config/default.json file like so: | + | Modify the <b>config/default.json</b> file like so: |
<source lang="json"> | <source lang="json"> | ||
"public": "../server/public/", | "public": "../server/public/", | ||
</source> | </source> | ||
− | Modify the webpack.config.js by changing the path and publicPath like so: | + | Modify the <b>webpack.config.js</b> by changing the path and publicPath like so: |
<source lang="json"> | <source lang="json"> | ||
path: path.resolve(__dirname, "server", "public"), | path: path.resolve(__dirname, "server", "public"), | ||
publicPath: "/", | publicPath: "/", | ||
</source> | </source> | ||
− | Modify the index.html so that the script build source is: | + | Modify the <b>index.html</b> so that the script build source is: |
<source lang="html"> | <source lang="html"> | ||
<script src="build.js"></script> | <script src="build.js"></script> |
Revision as of 19:07, 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