replace-me-with-your-repository-name v1.0.3
node-template
Minimum boilerplate template for front-end applications built with node
Getting Started
- Clone this repository and install the node dependecies with:
npm install - The default server is set to Express and can be started with:
npm start- An unset
NODE_ENVvariable will default to the production version of the Webpack bundle along with express server.
- An unset
- Open
localhost:8080to view the production instance of the server.
Development Environments
Mac OSX (Zsh)
- Set the
NODE_ENVvariable into your.zshenvfile with the command:echo 'export NODE_ENV=development' >> ~/.zshenv - Then reload the changes to the file with:
source ~/.zshenv - Test that the environment variable has been correctly set with:
echo $NODE_ENV
Windows 10
Powershell
Use Powershell set NODE_ENV variable to development with:
$env:NODE_ENV="development"- Note: This value will not persist after you close the terminal.
System Variables
To persist the NODE_ENV after closing Powershell follow these steps:
1. Type in environment into the search bar and open the dialog box for System Properties and under Advanced click on Environment Variables
2. Under the System variables, click the New... button to create an environment variable with the values:
```
Variable name: NODE_ENV
Variable value: development
```
* If you work on a shared machine, you should probably add the variable to `User variables` instead of `System variables`.- After entering these values make sure to exit by clicking
OKotherwise the changes will not save. - Restart Windows to use the updated environment variables.
Backends
Express
- The express backend is already configured to serve static files from
public/but you can change the values of the webpack output path and express static folder inapp.json.{ "express": { "output": { "path": "./public/js" }, "static": "public" } }
Seperate Local (i.e. Flask, Django, etc.)
- The frontend and backend repositories should share the same parent directory
- Set output directory for backend in
app.jsonunderlocal.output.path{ "local": { "output": { "path": "../backend-repository/static" } } } - Folder structure should look something like this:
GitHub ├── backend-repository └── frontend-repository
- Set output directory for backend in
After updating those configurations, run to build with webpack and watch for changes with:
npm run build-local-watch- Build the webpack bundle to the same directory without watching for changes with
npm run build-local
- Build the webpack bundle to the same directory without watching for changes with
You may need to reload bundle updates with a hard refresh command / Ctrl + shift + R to load changes.
- Webpack will continue to watch for changes, but you will typically need to hard refresh the browser to tell the server to send the updated bundle file.
Packaging
- Login to npm within your command line interface with the command:
npm login - Make sure that you have updated the package corresponding values in the
package.jsonfile.- The
nameparameter is how npm will reference your package when installing.
{ "name": "replace-me-with-your-repository-name", "version": "1.0.0", "description": "replace-me-with-your-repository-description", "author": "replace-me-with-your-name" ... } - The
Initial Publishing
Once you have logged in and updated the package.json values, you can publish your package with:
npm publish- This command will run
prepublishOnlyscript and then publish to npm afterwards.
Updating
- Update the source files as you would and create and push out a commit for these changes.
Once you have pushed those changes and you branch is up to date, you can update your package version with the following commands:
- Patch Release (1.0.1 -> 1.0.2):
npm version patch - Minor Release (1.1.0 -> 1.2.0):
npm version minor - Major Release (1.0.0 -> 2.0.0):
Note: Running these commands will also create a new commitnpm version major
- Patch Release (1.0.1 -> 1.0.2):
After updating the package version, publish these updates with:
npm publish