This is a Serverless example using Node.js as the backend and Bootstrap-vue (Bootstrap 4 + Vue.js 2.4 - without webpack) as the front end. This is a slightly more advanced example showing a simple Post/Comment web app, including user authentication. Additionally, both the front end nad back end are served through the API Gateway, no need to use AWS CloudFront.
Dont know what serverless is? Read here
Please be aware that this is using "production" stage only! Using different stages will break the front end. To fix it, simply find all occurances of "production/rest" in Vue files, and replace it with "dev/rest" or whatever you wish. Additionally, in "vue.config.js" change the "baseUrl" from "/production/assets/" to "/dev/assets" or whatever you need to.
The Serverless framework does have an extensive example repository but none of those examples explain how to connect the AWS Lambda with the front end using Vue.js. So I have decided to create a simple Post/Comment web app.
- Serverless framework to handle the backend with AWS as the provider and Node.js as the target language.
- Bootstrap-vue as the frontend (with Boostrap 4 and Vue 2.4 without using webpack configuration)
- User authentication using jsonwebtoken and bcryptjs
- DynamoDB for storing data
- Serving the front end through AWS API Gateway thanks to serverless-apig-s3 plugin. No need to use AWS CloudFront for serving REST API and the front end separately.
- Dynamic page load (all pages are loaded from S3 through API Gateway, therefore lambda is not used -> no dynamic pages)
- Front End caching (the necessary Cache-Control header is missing, this is due to the apig-s3 library)
- User input validation (there are many different libraries to handle this, pick one if you need to)
- Unit tests (but should be easy to add)
- Locally runnable (you will have to add the necessary plugins yourself)
Screenshot: Index page:
Screenshot: Post page:
Screenshot: Login dialog:
You must have an active AWS account and awscli installed in your OS, including AWS credentials.
Clone this repository:
git clone https://github.com/matusnovak/serverless-aws-node-bootstrap-vueGo to the cloned repository and install the dependencies:
cd serverless-aws-node-bootstrap-vue
npm installDeploy the back end first:
# In the serverless-aws-node-bootstrap-vue folder
npm run deploy:server
# This is same as: serverless deploy --stage productionOnce deployed, you should see something as the following:
endpoints:
POST - https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/production/rest/user/register
POST - https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/production/rest/user/login
...more...
Copy the https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/production where the xxxxxxxxxx is some random string of letters and numbers.
Then deploy the front end as the last step:
# In the serverless-aws-node-bootstrap-vue folder
npm run deploy:client
# This is same as: serverless client deploy --stage productionThen open your browser and go to the url you have copied in the previous step. That's it!
Please be aware that this is using "production" stage only! Using different stages will break the front end. To fix it, simply find all occurances of "production/rest" in Vue files, and replace it with "dev/rest" or whatever you wish. Additionally, in "vue.config.js" change the "baseUrl" from "/production/assets/" to "/dev/assets" or whatever you need to.
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.
In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to http://unlicense.org