Yo developer! Want sum web servurz?
So you decided to create a static web project. It would be really nice to test it right during development on a server. Let’s take a look around and pick a solution for serving static content.
The list of servers described here is not exhaustive.
Apache, nginx, IIS
Pretty good classic solution. The big advantage for developers is, all these servers are used in production so you can simulate 100%-production on your (virtual — ?) machine. That means you could test all the server features like partial/privileged access without uploading your code to the remote server.
However I’m not sure if this is useful for static content developing. Moreover, all these servers should be installed and configured (!) in not very easy way. You should set up separate config branch (or
*.conf-file) for every your web project.
Q: What about Denwer, XAMPP, LAMP solutions?
A: Right, these all-in-one bundles contain all you need for starting the development easy. Sometimes it’s redundant for small and/or static projects.
Just check solutions below.
Install the NodeJS and do
npm install -g instant-server
in the console. Right after that you can run
instant <port> in your project folder and be able to check the http://localhost:<port>/ in the browser.
Some advantages of this solution:
- it’s very simple.
- this server uses hot-reload, so once you changed any file within the project, the page is automatically reloaded in browser. No extra script injection is needed for this feature.
- Instant-server works fine with
browserify/warchifyand other project bundlers. Just keep running one terminal instance with
instant 8080and another one with
watchify app.js -o static/bundle.js.
Bare in mind, you won’t use this solution in production environment but we’re speaking about the development process, right?
Q: Is this only one NodeJS solution?
A: No, there are lots of them. For example, http-server, local-web-server, you can check also this or that solution or even write your own one.
BTW, first two support CORS, second one supports mime-types customization as well. Just in case you need it 🙂
Check the Webpack site for more info about this cool bundling engine. It contains all the the things we formerly wrote
grunt/gulp tasks for! It can compile SCSS/SASS, bundle together all the assets (CSS, images, fonts) and of course work with different JS bundling engines.
webpack-dev-server is the development server working like
instant but for Webpack projects.
- It keeps the generated content in memory that makes it very snappy.
- It produces map files alongside with bundles for debug purposes (contrary to solutions from above, where you should force, for instance,
browserifyto generate map files).
- A pretty feature is, you can use same
webpack.config.jsfile for both environments production and development.
The setup of the Webpack looks difficult but spend 2 hours of your life to try it. Believe me, it worth that.
Hope this helps and may the JS force be with you!