Starter library for Node.js applications using a flexible Gulp/Babel build system.
Try it out and let us know where you run into confusion or problems. Contribute to the Issues Page, or hit us up to become a code contributor. There are many small improvements you could make that would get your name added to the project!
There are a number of configutation files in the root director.
package.jsonis the main configuration fileProcfilesets the Heroku startup scriptapp.yamlconfigures a basic GCP deploygulpfile.jsis the flexible Gulp build system.eslintrcconfigures what ESLint reports on
The build system is divided into an application folder for all your development files, and a distribution folder that gets deleted and rebuilt every time you run the development environment.
There is also a server folder which holds files for the gulp configuration and Node.js server. All the magic happens in the /server/gulpConfiguration.js file.
Two npm commands are available npm run dev will run the development environment, or npm start to run the server environment. On your local machine, both will bind to port 8080. This can be changed in the server/server.js file.
You must run the development environment to create the distribution files prior to deploying. The application does not build the distribution files on server startup. This creates an extra deploy step, but significantly reduces the servercode footprint.
With this build system we opted to use Gulp instead of Webpack. Technically, they do different things. Gulp is a task runner that can run multiple build systems such as Babel, Webpack and Browserify. This starter package does not yet include an example of running Webpack with Gulp, but there are plenty of those available elsewhere.
We like Webpack, but it can be very restrictive and the documentation is frequently out of date. On the other hand, Gulp also comes with some disadvantages. At this point in development, the included Gulp environment will frequently stop running and need to be restarted. Also, becuase of the way the watch tasks are setup, the development environment needs to be restarted whenever a new file is added to the application.
In future versions we hope to combine the best of both the Webpack and Gulp worlds.
Three example projects are included. Project 1 is set as the default project that is shown when the site's root directory is requested (http://localhost:8080/). This can be changed in the /server/server.js file.
Each example has a corrisponding object in the server/gulpConfiguration.js file. To create a new project folder, create the folder in the application folder add a build task to this gulpConfiguration.js.
ES6 build with Babel, which does not support import statements. Indead librariesare bundled in with Gulp.
Full ES6 build with support for import statements.
An examples of React, Redux, and React Router v4.
Deploy to Google Cloud Platform
-
Install Node.js.
-
Install git.
-
Create a Google Cloud Platform project.
-
Install the Google Cloud SDK.
-
After downloading the SDK, initialize it:
gcloud init git clone https://github.com/bishopZ/Sandbox cd Sandbox npm install npm run dev -
View the app at http://localhost:8080.
-
Stop the app by pressing
Ctrl+C. -
Deploy the app:
gcloud app deploy -
View the deployed app at https://YOUR_PROJECT_ID.appspot.com.
Deploy to Heroku
-
Install git.
-
Install Heroku Toolbelt.
-
Initialize the Heroku app:
git clone https://github.com/bishopZ/Sandbox/ cd Sandbox heroku create npm install npm run dev -
View the app at http://localhost:8080.
-
Stop the app by pressing
Ctrl+C. -
Deploy the app:
git add . git commit -m "intial commit" git push heroku master -
View the deployed app:
heroku open