Simple Boilerplate is for HTML/CSS, Javascript, and JQuery projects. It has been setup with a live server so that you can see live changes with every save.
- Delete node_modules , package.json, and package-lock.json
- Copy in the new package.json from this repository into your repository
- run
npm install - Note that the new serve command is
npm start
Instructions to clone this repo.
3. Clone this repo to get the boilerplate for your project: git clone https://github.com/serpient/simple-boilerplate.git <YOUR APP NAME>
- For example, if
<YOUR APP NAME>is 'my-first-app' then the directory will be cloned as a new folder calledmy-first-app
4. Replace the link to this repo with your GitHub repostiory so you can save your code under your own repo (the new one you just made)
git remote rm origingit remote add origin <your repo link><your repo link>will be the link from the new repo you made in the first step. For example, if the repo name is my-first-app, the repo link will behttps://github.com/your-username/my-first-app.git. the final command would then begit remote add origin https://github.com/your-username/my-first-app.git
git push -u origin masterto push all the changes to your remote repository
- you will need to install the dependencies to get the boilerplate code working. From your terminal (inside your project directory) enter:
npm install. This will install the dependencies using NPM (node package manager)
- this command will open your project in the browser
- as you make changes to the code in the project it will automatically reload the browser page to reflect them
- you are ready to customize the project any way you'd like!
- your local repo has been configured to push changes to the new repo you made automatically
- read more about the basics of git in our Chingu Handbook
When creating more JavaScript files, remember to add them as Scripts in index.html. All JavaScript files are listed at the end of <body>. Remember -- ordering of the JavaScript scripts matter! For example, if you try and use a function from other.js in index.js, BUT, index.js is imported first in index.html -- it will result in undefined! That's because it doesn't know that other.js exists yet!
git clone <github repo link> my-app-name- Copies the repository onto your computer as a new folder called "my-app-name"git remote rm origin- At this point, this repository copy is still connected to the simple-boilerplate github repository. This command will remove the remote origin link so you can connect it to a new link.git remote add origin <your github repository link>- As mentioned above, this is how you add a new origin link for your repository. As in, any changes in your local development will be "pushed" and sent to the repository link you set.git push -u origin master- Pushes all your local repository changes to master branch, aka your github repository master-branch.npm installor shorthandnpm i- Installs all dependencies the repository will need.npm startwill run thestartscript defined inpackage.json- this begins the
live-serverpackage which opens the browser and hot-reloads whenever you make changes in the project
- this begins the
- In your github repository settings, do the following:
- Go to your browser and check out
http://<YourUsername>.github.io/<yourRepoName>. Give it a few minutes to see your changes!
If you want to deploy to Heroku, it would require you to write a small simple server that would serve the index.html file as an entry point. This boilerplate isn't setup for that, but feel free to add it yourself!
Something to research here