Web Dev't Boilerplate Setup using Express
- Verify nodeJS version.
$ node --version - Verify npm version.
$ npm --version - Verify git version.
$ git --version - Verify sublime version.
$ subl --version
- Create a local repository.
$ cd desktop && mkdir lastname-022317 && cd lastname-022317 - Launch sublime text editor.
$ subl . - Create
package.json.$ npm init -y - Install express as dependency.
$ npm install express --save - Create simple express directory tree.
$ mkdir public && mkdir views
+-- lastname-022317
| +-- node_modules
| +-- public
| | +-- css
| | | `-- app.css
| | +-- img
| | | `-- winteriscomming.jpg
| | +-- js
| | | `-- app.js
| +-- views
| | `-- 404.html
| | `-- app.html
| `-- .gitignore
| `-- package.json
| `-- Procfile
| `-- README.md
| `-- server.js
//server.js
//require modules
var express = require('express');
var path = require('path');
//instantiate express
var app = express();
//set port
app.set('port', (process.env.PORT || 5000));
//use static files
app.use(express.static(path.join(__dirname, 'public')));
//express routes
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, 'views/app.html'));
});
app.get('/about', function(req, res){
res.sendFile(path.join(__dirname, 'views/about.html'));
});
app.get('*', function(req, res){
res.status(404).sendFile(path.join(__dirname, 'views/404.html'));
});
//express server listen
var server = app.listen(app.get('port'), function(){
console.log('Server listening on port ',app.get('port'));
});<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>
</head>
<body>
<h1>Welcome to my web app!</h1>
<img src="img/winteriscoming.jpg" />
<br>
<a href="/">Home</a> |
<a href="/about">About</a>
</body>
</html><!--404.html-->
<!DOCTYPE html>
<html>
<head>
<title>404 Page</title>
</head>
<body>
<h1>Error 404: Page cannot be found!</h1>
<p>Click <a href="/">here</a> to return to main page</p>
</body>
</html>- Download images here
- Create new github remote repository
- Open
.gitignorefile and writenode_modulesinside. $ git init$ git config user.email "[email protected]"$ git config user.name "yourgithubname"$ git status$ git add .$ git commit -m "my first commit"$ git remote add origin https://github.com/yourgithubusername/yourgithubrepo.git$ git push -u origin master- Open your web app at http://localhost:5000
$ node server.js
$ heroku login$ heroku create lastname-022217$ git status$ git add .$ git commit -m "deploy to heroku"$ git push -u heroku master$ heroku open
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent