Giter VIP home page Giter VIP logo

react-expressjs's Introduction

Behold the ReactJS + ExpressJS Boilerplate

I wrote an article about this repo which explains the structure.

This is a boilerplate to use ReactJS, ExpressJS, Redux and React Router v4 in a project.

  • ReactJS - The state based framework for your Views
  • React Router v4 - For routing to different paths
  • Redux - Redux manages your state
  • Babel - The compiler to compile your JS files with es6, es7, JSX syntax to regular javascript
  • Webpack - The module binder which takes all your JS files from different directories and compiles them into a single app.bundle.js (you can change the filename of course) so you can include it in a HTML page
  • ExpressJS - The node framework to serve your views to the world when they hit the server at example.com or example.com/awesome.html

Installation

Node Version: v9.0.0^

Just clone this repo or download the zip file. cd into the directory and run

npm install

Developing App with Hot Reload

To develop your own react application, you can take advantage of React Hot Loader and Webpack Dev Server. To develop app with hot reload:

npm run dev

Now you can access your react application on http://localhost:8080

Production build and Deploy

To make a production build of your project, run the following commands

npm run build

This will create create two files: index.js in server/public/js and server.js in server/bin.

server.js will be used for serving the application on port 3000 and index.js is the actual react app itself.

Finally run

npm start

The you will be able to access this app from http://localhost:3000.

To get a distributable tarball of your application, run this command

npm pack

Remember that you have to run npm run build before doing this. This will create a tar.gz file in your root folder. The contents in this file is deployable. All you need to do is copy the contents inside package folder inside this tar.gz file to your server and run the app with something like pm2.

react-expressjs's People

Contributors

aedm avatar arunmmanoharan avatar hew avatar stewartmurrie avatar tahnik avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-expressjs's Issues

cannot Get /

I cloned a fresh version of this repository and ran npm install. Following that I do npm run dev and when I navigate to localhost:8080 all I get is an error message "Cannot Get /". I have the latest version of node installed, 10.5, so am I missing something else? If I build and then run npm start the application works as exprected.

Serve static file on apache2

Hi, is there a way to serve static file on apache server. The example that I know that is working is on Angular, on angular we just run ng build --prod and this will create a dist folder where there is an index.html. On apache, we just serve the dist folder. But here we use React with webpack that not contain dist folder with an index.html so I don't know how to do that on your project.

PS : Sorry for my english, it's not my native language

Thanks

NPM 'start' script

./package.json - "start": "cd server && node bin/server.js"

Directory ./server/bin/ does not exist

You don't say which version of node to use

I've run into a few different issues trying to get this running.. I think knowing the following would help a lot:

  1. What version of node are you using?
  2. What commands do you run to install the app?
  3. What command do you run to run the app?

server.dev.js

Hi,

Would you please illustrate how one would implement a development version of the production server?
I am trying to write functionality that will be handled by the server at runtime, but it's impossible to hit the server since it is not part of the dev environment.

Thanks

Siya

Update server.prod.js presets

Error Plugin/Preset files are not allowed to export objects, only functions resolves by this presets:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.