Skip to content

A basic Vagrant setup with Node.js, React.js, PostCSS, and Webpack

License

Notifications You must be signed in to change notification settings

danielwrobert/vagrant-react-webpack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vagrant React-Webpack

A basic Vagrant setup with Node.js, NVM, React.js, Webpack, and PostCSS.

Uses the ubunty/trusty64 Vagrant box for the official Ubuntu Server 14.04 LTS (Trusty Tahr) builds.

Note: While this box includes PostCSS, it sticks with just a couple basic plugins - Autoprefixer and PreCSS. See this Gist for an example with additional optimization plugins.

Getting started

To get up and running with this environment, you first need to have Virtualbox and Vagrant installed on your system.

If you don't already have those, visit the downloads pages below and follow the instructions for your operating system:

Once you're set up with those, you can download/clone this repo to the root directory of your project, and run vagrant up from your Terminal application.

After everything installs, you can run vagrant ssh. This will shell you in to your local Vagrant instance. Have a look around, if you'd like, but the main folder you want to be aware of is the shared /vagrant directory. This directory is shared between your virtual machine and your local project directory.

Project Structure

I have set up the application structure where the React development files are in the app directory and the final, complied files are output to the public directory. This can be changed to fit your projects needs. Just note that the changes would also need to be reflected in the webpack.config.js file.

Running the Webpack Dev Server

To run the Webpack Dev Server, you will want to move into the aforementioned shared folder on your Vagrant server. If you haven't already, shell into your Vagrant server via the vagrant ssh command. From there, type cd /vagrant. Now that you're in the right location, you just need to run npm start to fire up the Webpack Dev Server.

Once you have the Webpack Dev Server up and running, you can jump over to your browser and visit localhost:8881 and see that appication is running!

That's all there is to it. Now you have Node.js, NVM, React.js, Webpack, and PostCSS installed in a virtual machine and your local system environment is left untouched!

Bundle the project for distribution

Running the Webpack Dev Server will not actually generate the output files. Instead it keeps and serves the resulting files from memory. When you're ready to generate the final output files for your project, run npm run bundle. This will generate everything into the public directory and you can distribute from there!

About

A basic Vagrant setup with Node.js, React.js, PostCSS, and Webpack

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published