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.
Related
I've got a next.js app that is using aloglia via react-instantsearch package. When I run next.js in dev mode I get not results displayed from react-instantsearch. When I do a "next build" which makes the optimized and then a "next start" the search works and displays results. There are no errors in the console so I have no idea what the issue is.
Setting reactStrictMode: false fixed the issue but I have no idea why. Credit to the person who pointed this fix out to me. https://github.com/algolia/react-instantsearch/issues/3629
The recommended solution is to move from react-instantsearch-dom to the newer react-instantsearch-hooks-web library for new projects using Algolia InstantSearch.
For older projects, pinning to React 17.x or setting reactStrictMode: false in next.js.config should keep things running until you can migrate to the new library.
I have a react project I am trying to deploy to heroku. I did so by installing the react buildpack however when I go to the website, open inspect element, all my client side source code is simply exposed to all public view. What am I doing wrong, I cannot find any help which addresses this issue but it is quite the security flaw. Help me understand, because I know I did something wrong and it should not be this way. Thanks!
Change the build script to include GENERATE_SOURCEMAP=false so that the build commands follow it. This is an intended effect according to this
gaearon
This is expected. You can delete .map files from the build output if
you want to disable it, although you'll get console warnings about
them missing.
There is no harm in leaving them in though in my opinion. Client code
is already available to the user’s machine so there’s no secrets in
it.
scripts: {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
I have been trying to figure out how to host my React App on GitHub Pages. I found these two guides, but neither seem to work:
https://github.com/gitname/react-gh-pages
https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
The first guide seems to only work with a pre-made React-App (step 2 of procedure). On the other hand, it seems to work correctly otherwise. The issue with this guide for me is that I made my app from scratch, so I don't have the same names for codes. For example I had to use (because dist/ is my build path):
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d dist/"
}
The other guide seems to have the same issue (not custom app), but I'm not sure because I don't recognize all of the code. Since a lot of the code is different, for example they have:
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test — env=jsdom”,
“eject”: “react-scripts eject”,
“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”
}
When I deployed gh-pages, a different branch was built in my github repo, but I'm not sure if it's supposed to be working automatically. Essentially, I'm kind of new to this, so I'm not sure what I'm doing wrong. I'd really like to finish creating this website with GitHub Pages because it seems that I am close, but if this is futile, is there a free alternative that would be easy to setup?
Here is a link to my github master branch: https://github.com/NumaKarolinski/PersonalWebsite
I think by looking at my package.json, and webpack.config.js, it should be obvious as to what I am doing differently from usual?
I don't get any errors when following the guide, but the intended URL just has a 404 error. There are no errors in the console (except on Chrome which has a favicon.ico error which doesn't make much sense since I don't have a favicon).
For your other options i prefer firebase for reactjs app.Just follow this steps to deploy app build to firebase.
install firebase cli
cd to project
npm run build
firebase init
firebase deploy
and you are done.Hope this help
In the examples you linked, they are using create-react-app as a boilerplate, that's why it looks so different. All the build scripts are given to you. I would recommend using create-react-app for small to even medium size projects, and you can always eject to config the boilerplate if needed. Github pages are probably the easiest option around, but you are really close.
Option 1:
You need to create a build directory, and push that directory to a Gitbub branch and have Github host that branch for your website. To do that, you will need to go to settings in that repo and set it to use a different branch. Just make sure only built app is in that branch. Basically, all your js files should be compressed into one file and etc.
Option 2:
You have a pretty small app, just create a create-react-app and copy everything over, and then follow the instruction again for deployment.
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.