This site is a universal Vue.js application built with Nuxt.js, and is deployed as a pre-generated static site on Amazon S3. In addition to Vue and Nuxt, several noteworthy supporting technologies have been used, including the following:
To get started, clone/fork the repo, cd into it, and install the dependencies.
$ yarn install
$ yarn dev
$ yarn generate
The generated site will be output to the
Local HTTP Server
Sometimes in development it can be helpful to run the statically generated site with a local web server, simulating a production environment. I have found http-server to be a great choice. Here's how I build and serve the static site on my local machine.
First, install http-server globally if you don't already have it.
$ npm install http-server -g
Next, build the site as explained in the previous section.
$ yarn generate
Finally, move into the
dist/ folder and start the server.
$ cd dist/ $ http-server -p 8080
http://localhost:8080 and check out the site!
Nuxt allows you to define environment variables which can be accessed at compile time by calling
process.env.YOUR_VARIABLE. This is particularly useful for generating builds with specifics that differ between, for example, production and staging environments.
To generate a production build, run:
$ APP_ENV=production yarn generate
This will, among other things, set the robots meta tag to
APP_ENV is set to anything else, the robots tag will be set to
Our preferred deployment solution for static sites is Amazon S3. It's super cheap, and provides lots of nice extras like a CDN with CloudFront and a free SSL certificate. The Nuxt docs provide a detailed guide to deployment with S3 + Cloudfront.
Individual deploys are handled with the
bin/deploy script, which calls the
gulp deploy task provided by gulp-awspublish. The
bin/deploy script expects the environment to be passed as an argument.
# Deploy to development $ bin/deploy dev # Deploy to production $ bin/deploy prod
For more information on deployment with Nuxt, visit their FAQ page.
This site was developed in tandem with dobroizlo.com.ua and these two projects were my first using Vue.js and Nuxt.js. In learning these technologies, I consulted a variety of blog posts, online tutorials, and video courses — some paid, others free. By the far the most thorough and effective for me were two courses on Udemy by Maximilian Schwarzmüller:
If you want to learn Vue/Nuxt, I highly recommend these courses. Max is a great instructor, very thorough and engaging. His lessons are informative and a real pleasure to listen to. Thank you Max!
Bible First is a registered trademark of Euro Team Outreach, Inc.
© 2018 Euro Team Outreach, Inc. Software is licensed under MIT.