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_ENV
variable will default to the production version of the Webpack bundle along with express server.
- An unset
- Open
localhost:8080
to view the production instance of the server.
Development Environments
Mac OSX (Zsh)
- Set the
NODE_ENV
variable into your.zshenv
file 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
OK
otherwise 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.json
underlocal.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.json
file.- The
name
parameter 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
prepublishOnly
script 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