I am new the MEAN stack.
I started this nice journey with an Angular2 template,
http://akveo.com/ng2-admin/
However, I got some questions:
When I am developing the front-end part, I start webpack-dev-server.
Do I need to start webpack-dev-server when the project is in production situation?
If I have a NodeJS API server, do I need to start both "node server" and "npm start" in production situation?
In terms of file structure, how can I combine ng2-admin starter (based on Webpack) and the NodeJS API server in the same project?
These questions make me so much confused.
Thank you and look forward to your great answers.
Related
I'm pretty new to developing and deploying full stack applications, so I had a few questions that I've been having a hard time finding the answer to.
I have 2 projects currently. An Express/NodeJS Backend project that contains my API (generated with express-generator), running on port 9000, which I run with npm start.
Its file structure is like this:
Then, I have a separate React project for my front-end (generated with create-react-app), running on port 3000, which I run with npm start.
Its file structure is like so:
When I go to deploy this, whether it be on Heroku or AWS or whatever, it needs to be one consolidated project that contains both the front-end and back-end projects, correct? I have seen project layouts that are basically a React app + 1 File for backend, like so:
To deploy my two apps (React App and Express API) as a website, do I need them to be one single project?
If Yes to 1, then why do people use create-react-app and express-generator if it ultimately doesn't leave you with a file-structure for a fullstack app?
Is there any guide that shows how to combine (in the literal sense of file structure, since the two apps are already communicating fine) two apps created with express generator and create-react-app?
If I need to combine them, what does this mean for my package.json?
Right now, in my backend package.json, I have the scripts:
"scripts": {
"start": "node ./bin/www"
}
and in my front end package.json, I have the scripts:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'd imagine that if the two projects are to be merged, the start script would need to be altered to run both?
Interested in learning best practices for the file structure of a fullstack application (In this case, MERN stack just without Mongo). Any advice or suggestions are really appreciated, thank you!
To deploy my two apps (React App and Express API) as a website, do I need them to be one single project?
No. You can even deploy them to different domains and treat the frontend as another product. There are pros and cons in keeping both apps in the same Git repository.
If Yes to 1, then why do people use create-react-app and
express-generator if it ultimately doesn't leave you with a
file-structure for a fullstack app?
People use CRA because it's the default way by Facebook and simply works. But many people do Server Side Rendering using frameworks like NextJs or another boilerplate.
Is there any guide that shows how to combine (in the literal sense of
file structure, since the two apps are already communicating fine) two
apps created with express generator and create-react-app?
If you are simply communicating via API, keep both in different folders.
For React, you are gonna create an optimized production build anyway (you don't need node constantly running in your server to serve the final html and Javascript files).
For the backend, even if you use another language, you deploy normally, as you would while using static html.
I have a flask based server running on GAE doing some complicated calculations. It exposes a RESTful API.
Now I'm planning to build a nice front for it with React. All it will do is showing a fancy form and sending requests to the API with parameters, and receiving calculation results from the flask server, and showing some nice-looking charts. And due to the long time the calculation requires, I'm considering adding WebSocket to it too.
A node.js server seems too redundant for this purpose.
How should I host this kind of simple React apps?
Is it possible to simply upload the built HTML and JS to a bucket and host it as a static site? If it's possible, some detailed instructions would be very helpful!
I would assume you go through the below URL to create your react app.
https://reactjs.org/docs/create-a-new-react-app.html Once you create the react-app it will automatically include react-scripts package in your package.json file. It would have automatically included the "build": "react-scripts build" in the scripts section. Now in the command prompt if you just run "npm run build" it will create all files in the ./build folder. Copy all the files from build folder to bucket. You must setup index.html as index using gsutil, else it will not work. Additionally if you are invoking any api's set up CORS policy on the bucket as well using the gsutil.
I'm somewhat new to JHipster and have used grunt in the past to live reload changes to client side code in Tomcat webapps. I'm wondering what best practices are to do the same with JHipster. The documentation discusses using "yarn start" or "npm start" when working on your local machine. I need to work remotely on an AWS box and can't do Browsersync.
As I make changes in the /src tree I'd like them to get picked up and deployed into the /target tree so I'll see them with a browser refresh.
Curious what other have done in this situation and would appreciate any recommendations on how to accelerate JHipster client side development on a remote server.
Thanks!
I am using the React Redux Starter Kit from DaveZuko, and am stuck on how to create production server to serve the compile client side code.Ideally I would just like to use the Koa server and move it to production, but can't find out how to do that.
All relevant code is unchanged from the repository here: https://github.com/davezuko/react-redux-starter-kit
Does anybody know how to compile a product server for this?
I did try to use davezuko's starter kit, but it was really hard to follow what those configuration files really did and messed them up when trying to install packages that were missing.
I also tried facebook's create-react-app, but that was really complex too when you run the eject command, so I gave up and created my own starter kit http://redux-minimal.js.org/ . I has the minimum amount of packages that lets you build rich real-word apps, but doesn't have the cluttered configuration boilerplate that other starter kits have.
Now, answering your question, with redux minimal, you just do "npm run build-prod" and it compiles the css and js files for the production environment, minified and ready to go. Then you just copy the public folder which contains the html file too, paste to what ever server you want, and then call the index.html url and it works.
I'm new to web development and just finished Angular course at Coursera.
Everything was OK to my course project app until I have decided to deploy it at Cloud9. So the app doesn't have back-end and takes data from a simple db.json file which I was running on my computer with the json-server at localhost:3000.
I have cloned my git repo to the Cloud9, installed all dependencies and thought that the procedure with json-server will be the same and it will serve json data at the server, but it's looking that I was wrong.
I think I missed something and asking for explanation of my problem.
Thank you guys.
If you're looking to develop on Cloud9, you'll need to make sure you use process.env.IP instead of localhost and process.env.PORT (or port 8080) instead of 3000.
That being said, Cloud9 is not a hosting solution. If you use it as such, your account will be deactivated. Consider something like Heroku for deployment.