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
Individual deploys are handled with the
bin/deploy script, which basically wraps the AWS CLI, using the
aws s3 sync command to copy files up to the appropriate bucket. The
bin/deploy script expects the environment to be passed as an argument.
# Deploy to staging $ bin/deploy staging # Deploy to production $ bin/deploy production
The deploy script handles properly setting the aforementioned
APP_ENV variable, as well as supplying the appropriate
Code Style and Linting
CSS linting is done with stylelint.
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.