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.
Related
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 have deployed my app which is built with webpack-dev-server through AWS ec2-instance. It says I should change it to production. What is the difference between deploying in development and production? If the development server compiles every assets and components into a bundle too, what is the benefit of using production?
Additional question:
When setting a start script to start webpack-dev-server, I saw people writing it as
"scripts": {
"start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js"
}
from it, what is the reason for prepending --output to -filename?
I tried writing without it and apparently it works fine. I looked up the documentation, but couldn't find what I was looking for.
could someone tell me what that is if one knows?
Thank you.
Optimizations and security are the biggest factors.
I have a react website and want to deploy it to the web. I already bought a domain on godaddy and want to link it to the site. I also want to have a ssl certificate for it.
What is the easiest way to do this. I already tried out heroku but i had trouble linking godaddy to heroku and getting a ssl certificate. I would be ok paying 5-10 bucks per month
Thanks!
Check now.sh, it is the simplest way I've seen.
They give you ssl cert, and if you need you can use your own domain name.
You will be able to build your site using npm/yarn:
In package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && now build/ --public
.....
}
Then from root of your project run
yarn build
Buy VPS and setup all things manually.
It is not so hard, you will need:
Buy vps/vds, for example on digitalocean.com
Install node+npm/yarn, apache/nginx, setup ssl certs using letsencrypt (usually it takes me 30 min to configure new server)
Second case is cheaper and gives you much more flexibility but will take more time and effort.
If you'd be a okay with http and free hosting with domain ending in 'surge.sh', you can check out
surge.sh
It's easy to use. Setup once on your machine, create a build with yarn/npm. Run surge command and provide you build path.
You could also give a custom domain name.
This is the easiest way if you want to host a informative website with no use auth.
(I've a bunch of websites hosted on it, created while learning reactjs - http://moview.surge.sh or http://readers-digest.surge.sh)
I've built my Angular 2 project using the Angular 2 CLI and was able to deploy the application to Heroku using this tutorial.
Now, I'd like to create a pipeline for the different environments of the applications (dev, staging, production, etc...).
In my package.json I have "postinstall": "ng build -prod" which creates a production build of my code, which my application runs off of. Is there a way that I could have -prod change based on CONFIG_VARS that I would have in my Heroku setup? For example it would say "postinstall": "ng build -dev" for a dev environment or "postinstall": "ng build -staging" for a staging environment. Or would I need to set up my project differently?
The short answer is: No, you will need to do something different.
Explanation:
The npm postinstall script runs when the Heroku slug is built, when you do a git push to the first Heroku app in your pipeline. Subsequently, when you "promote" releases through your Heroku pipeline (e.g. from "development" to "staging" to "production"), the pre-built Heroku slug is promoted "as is", and is NOT rebuilt.
Hence, let's say you have a config var set up in your "development" app that would set the argument that you pass to "ng build" to "dev". That means that when you git push to your "development" app, the slug will get built with the "dev" options. That is fine for the "development" app. HOWEVER, when you subsequently promote to "staging" and "production", you will be promoting the pre-built slug that was built with the "dev" options, which is NOT what you want.
So, to get the functionality you want you will need to consider a different approach.
One way to do it would be to run your "ng build" script in the "npm prestart" phase. That should work, and enable you to use Heroku config vars to modify your Angular2 app depending on the Heroku pipeline phase they are deployed on. However, I typically would NOT recommend this approach. This will cause your "ng build" to run every time "npm start" is run, which is quite often on Heroku (i.e. at least once every 24 hours or so, plus every time your Heroku dynos restart for whatever reason). This would cause your app to experience longer downtime than necessary EVERY time your dynos restart. Not a good idea, typically.
Instead, a better option may be to have your Angular2 app query your server when it initializes, and have the server return whatever pipeline-phase specific values your Angular2 app needs, based on regular Heroku config vars.
If you are running your application in a Heroku node environment you can try to take a look at this solution to avoid having your environments variables and security keys hardcoded in the repositories: https://medium.com/#natchiketa/angular-cli-and-os-environment-variables-4cfa3b849659
I strongly suggest also to take a look at its first response that introduce a dynamic solution to create the environment file at building time: https://medium.com/#h_martos/amazing-job-sara-you-save-me-a-lot-of-time-thank-you-8703b628e3eb
Maybe they are not the best solutions, but a trick to avoid setting up projects differently each time.
i found your question when i was researching the same issue.. how to use environment vars from heroku inside of angular..
after not finding any satisfying answer i came with this (cookie) approach for using different API endpoints for my pipeline.
set a cookie in your server response (server.js) with the content of your var:
app.use(function(req, res, next) {
res.cookie('API_URL', process.env.API_URL || 'http://127.0.0.1:8500/api/');
next();
});
read the value inside of your module:
this.apiUrl = cookieService.get('API_URL');
it's a workaround that will of course only work when user accepts cookies...
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.