I want to start a React web application using a Shell script located at a different place in the same project. The project directory structure looks like follows.
project/
├── bin/
│ └── start.sh
├── config/
│ └── app.config
├── lib/
├── react_app/
Here's the relevant code segment of the shell script bin/start.sh
#!/bin/bash
# load configurations
REACT_APP_WEBSOCKET_PORT=8015=$(cat ../config/app.yaml | shyaml get-value websocket_port)
# start the react applications
REACT_APP_WEBSOCKET_PORT=$REACT_APP_WEBSOCKET_PORT ../lib/react_app npm start
The shell command I'm using seems to be incorrect. Any help?
Here's the error log.
./start.sh: line 38: ../lib/react_app: Is a directory
The command ../lib/react_app npm start is trying to launch executable react_app with arguments npm start, which is a directory, not a file.
I would just cd into the directory, like so:
#!/bin/bash
# load configurations
REACT_APP_WEBSOCKET_PORT=8015=$(cat ../config/app.yaml | shyaml get-value websocket_port)
cd ../lib/react_app
# start the react applications
REACT_APP_WEBSOCKET_PORT=$REACT_APP_WEBSOCKET_PORT npm start
Related
STATEMENT
I want to make project with django backend and React frontend. I have created a project using and then create a frontend react folder using create-react-app. Now I want to upload my projectname folder to my github repository. But when I add my files using git add . command from my root folder('projectname' folder). It shows some warnings given below. What should I do? Please help.
WARNING
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint: git submodule add <url> frontend
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint: git rm --cached frontend
COMMAND THAT I HAVE USED
$ virtualenv env
$ source env/bin/activate
$ pip install django
$ django-admin.py startproject projectname
$ cd django-react-demo
$ npm install -g create-react-app
$ create-react-app frontend
MY FOLDER STRUCTURE
projectname
│
└───frontend
│ ├──.node_modules
│ ├──public
│ ├──src
│ ├──gitignore
│ ├──README.md
│ ├──package.json
│ └──package_lock.json
│
│projectname
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.py
You are seeing that error because you have a git repository nested inside another repository.
Your main project directory projectname has a .git directory, and the directory nested inside it frontend has another .git repo that create-react-app created. The git repo inside another repo is called a submodule. It's possible to work with submodules, but it has its own quirks.
The easiest way to get around your error is to use only one git repo in your main project directory and delete the .git directory inside frontend directory. Try the following steps:
Go into the frontend directory.
cd frontend
Delete the .git directory inside frontend directory.
rm -rf .git
Go back to your main project directory.
You should now be able to track all files inside the frontend directory inside your main directory.
Maybe your react project i.e. frontend is also a git repository. So, what you can do is, put the frontend on the outside of the projectname folder and use the API key that you have from the backend in the frontend for your work.
You can follow this link:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react
I am creating a personal project in TypeScript. It should be a library that exports React components and TypeScript functions. The idea is therefore to publish this library on npm in the future.
There is also a demo page within the project and this is where I would like to use Storybook to test React components.
This is the structure of the project:
.
├── demo/ # demo page
│ └── Home.tsx # where I would like to use Storybook
│ └── index.html
│ └── index.tss
│ └── style.css
├── dist/ # distributable version of app built using Parcel
├── node_modules/ # npm managed libraries
├── src/ # project source code
│ └── lib/ # folder for your library
│ └── myFuncion.ts # function to export
│ └── MyComponent.tsx # react component to export
│ └── index.ts # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...
I have read the Storybook documentation and it recommends to install Storybook by running npx sb init. I tried but the problem is that the stories are put in the project src directory, not in the demo page:
.
├── demo/ # demo page
│ └── Home.tsx # where I would like to use Storybook
│ └── index.html
│ └── index.tss
│ └── style.css
├── dist/ # distributable version of app built using Parcel
├── node_modules/ # npm managed libraries
├── src/ # project source code
│ └── lib/ # folder for your library
│ └── myFuncion.ts # function to export
│ └── MyComponent.tsx # react component to export
│ └── stories/ # Storybook <<---
│ └── index.ts # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...
And the storybook script that is created is this:
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
but I would like something like:
"scripts": {
"storybook:demo": "start-storybook -p 6006",
"build-storybook:demo": "build-storybook"
},
So how can I install and use Storybook only on the demo page?
Looks like you're ultimately trying to have multiple source directories. This is supported by both TypeScript and Storybook, it just needs a bit of configuration.
tsconfig.json should have the include option set to:
"include": [ "src", "demo" ]
This tells TypeScript (or its Babel loader) to compile files in src and demo.
.storybook/main.js should have the stories option set to:
stories: [
'../demo/**/*.stories.mdx',
'../demo/**/*.stories.#(js|jsx|ts|tsx)',
],
This specifies which files should be interpreted as stories and in our case it would load *.stories.mdx/js/jsx/ts/tsx recursively from the demo folder.
Also note that the stories folder is just an example folder created by Storybook and you can safely delete it. Stories can be in any of the directories processed by TypeScript as long as it matches the patterns specified in .storybook/main.js.
You can even have multiple Storybooks with multiple configs in a single project, but that may not be what you're after. Just in case, though, the command would be start-storybook -p 6006 -c path/to/config/.storybook
If I understood correctly, you want to build a components library and have demo app for your components.
I don't think there is a way to use Storybook in an existing app. This would mean you would have to build your demo app and use some components from Storybook to show case components in your app. To my knowledge this is not possible. It might be, but it seems complicated and I don't know of any docs on this.
I think the Storybook app is (or should be) your demo app.
Storybook can render mdx files so you can add any content to it and get a demo app.
What you could try:
Move your demo app content and component stories to the demo folder
Migrate Home.tsx to a mdx file
Change Storybook's config to load stories from '/demo`
To a degree, you can change Storybook's styling and "make it your own" and this can become your demo app.
Until I discovered Storybook I used a home-made components show case app with react-live. Might want to take a look at it but I think Storybook is is better and easier to maintain.
I have a Javascript (typescript) project that I am using as a git submodule in a react project (also typescript).
This all works fine... until I make use of any node module in the git submodule. I tried using, for example, the node modules "moment" and "faker", but I am almost certain that it does not have anything to do with these specific node modules.
Importing for example "moment" in the submodule:
import moment from 'moment';
using it:
moment().format('DD/MM/YYYY');
and running the main react project leads to this error:
Failed to compile.
./src/project_core/node_modules/moment/moment.js
Line 5:37: 'define' is not defined no-undef
Line 5:50: 'define' is not defined no-undef
Removing moment().format('DD/MM/YYYY'); solves it.
If I just run some tests directly in the submodule and make use of for example "moment", it always works. I can use the node modules. It looks like something goes wrong once the main project uses the node modules in the git submodule.
This is how my react project looks like. As you can see the submodule project_core is added in the src folder of the main project.
├── build
│ ├── assets
│ └── static
│ ├── css
│ └── js
├── node_modules
├── public
│ └── assets
└── src
├── project_core
│ ├── node_modules
│ ├── src
│ └── tests
├── ui
├── api
└── utils
I know... I read everywhere that using git submodules is not recommended. I, however, just want to experiment with git submodules to learn from it.
It looks like you have a node module inside a node module. This probably confuses your bundler and produces the import errors. Try removing the package.json and node_modules from your project core subdirectory and see if the imports work correctly. If you want to make your core directory a library think about actually having it as a npm dependency instead of a submodule. You could still reference a git commit hash in the dependency.
Disclaimer; I am new to react & react-native. I've downloaded a UI module and am attempting to use it in my project. This is what the folder structure looks like:
├── myProject
│ ├── README.md
│ └── src
│ └── client
│ └── {actual react-native project}
└── react-native-ui-module
├── node_modules
├── package-lock.json
├── package.json
└── src
I've added react-native-ui-module to myProject/src/client/package.json like so:
"react-native-ui-module": "file:../../../react-native-ui-module",
From there, I've executed the following command:
$ npm install
$ react-native link
I can see the module in node_modules after the above steps.
I've expected to then use the module like so:
import { Button } from 'react-native-ui-module';
However, I'm getting an error that states that the Modulereact-native-ui-module` does not exist in the Haste module map. I've tried following the error message's suggestion, which is:
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
Clear watchman watches: watchman watch-del-all.
Delete the node_modules folder: rm -rf node_modules && npm install.
Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
I've also tried using relative and absolute paths in the import statement. Is there a better way of importing and installing the module? And what other troubleshooting steps can I take to actually use the module?
Also, to clarify; this is a module that I've purchased and manually downloaded, so it's not available from npmjs.
The short thing you can do, considering your current situation, is to copy the ui module into the node_modules of your {actual react-native project}, then the ui module will be available for you to use in the imports, in this way you don't even need to add the module into your package.json, but this way is just for testing what the ui module can do.
The correct way is to find this ui module in the npm site, and use the command npm install --save [name-of-the-ui-module], then ui module will be available for you to use in your imports.
(Updated considering comments bellow)
To avoid Headaches with npm, considering that your library is not in the npm repository, you can also include this library in a lib folder into your project, and use it like you were using any other component.
I am trying to introduce Go vendoring (storing dependencies in a folder called vendor) to an existing App Engine project. I have stored all dependencies in the vendor folder (using Godep as a helper) and it looks right, but running the application locally I get the following error:
go-app-builder: Failed parsing input: package "golang.org/x/net/context" is imported from multiple locations: "/Users/erik/go/src/github.com/xyz/abc/vendor/golang.org/x/net/context" and "/Users/erik/go/src/golang.org/x/net/context"
I believe the two locations should resolve to the same location, as Go applications should look in the vendor folder first. Is there a way to make Appengine understand that both dependencies are the same?
Your project directory (where app.yaml is) is probably in the GOPATH/src.
It shouldn't be.
The go-app-builder will take everything in the app.yaml folder (and below) and additionally merge your GOPATH into it, meaning now you have it twice.
The solution is to move app.yaml out of the GOPATH/src folder.
Additionally you'll find that goapp test works differently from goapp serve and goapp deploy when it comes to resolving dependencies.
So this is the solution I have been using (haven't used golang app engine in a while already) and it's the only setup I've found to work properly for all the goapp commands and for govendor to work properly (not sure about godep)
/GOPATH
├──/appengine
| ├── app.yaml
| └── aeloader.go
└──/src
└── /MYPROJECT
├── main.go
├── /handler
| └── handler.go
└── /vendor
details:
file: GOPATH/appengine/aeloader.go (NOTE the init function is necessary, probably a bug though)
package mypackage
import (
_ "MYPROJECT"
)
func init() {
}
now run goapp serve and goapp deploy from ../GOPATH/appengine/ and goapp test ./... from ../GOPATH/src/MYPROJECT
P.S. I find the global GOPATH thing silly and simply set my GOPATH to current project folder (in the example above /GOPATH) and check the whole thing into version control.
I use a Makefile to move the vendor directory to a temporary GOPATH:
TMPGOPATH := $(shell mktemp -d)
deploy:
mv vendor $(TMPGOPATH)/src
GOPATH=$(TMPGOPATH) gcloud app deploy
mv $(TMPGOPATH)/src vendor
I store this Makefile at the root of my service near the vendor directory and simply use make deploy to deploy manually or from the CI.
It works with Glide, Godeps or any tool that respects the Go vendor spec.
Please note, that you really need to move the vendor directory out of the build directory, otherwise the GoAppEngine compiler will try to build the vendor dependencies, potentially causing compile errors.
I just ran into this issue myself actually. The problem occurs when you're using the App Engine tools to build any package which imports something that is using vendoring, but the package you're trying to run doesn't have the import within it's vendor directory.
So, for example, if I'm trying to run package foo, which imports package bar, and both of which use the github.com/gorilla/mux library, if the bar repository has a vendor/ directory that contains gorilla/mux, but the foo package doesn't have gorilla mux in it's vendor/ directory, this error will occur.
The reason this happens is that the bar package will prioritize it's own vendor package over the one in the GOPATH, which is what foo will be using, causing a difference in the actual location of the imported paths.
The solution I found to this issue is to make sure that the foo directory is in the GOPATH and has the vendor directory properly installed. It's important to note that the vendor/ convention only works from within the GOPATH.
I managed to resolve this error using govendor instead of Godeps. The root cause appears to have been that vendored references with their own vendored references was not resolved correctly by Godeps.
The answer provided by Su-Au Hwang is also correct - you do have to keep app.yaml separate from your source.
Also got the same problem.
In the docs Google suggests the following:
For best results, we recommend the following:
Create a separate directory in your app's directory for each service.
Each service's directory should contain the service's app.yaml file and one or more .go files.
Do not include any subdirectories in a service's directory.
Your GOPATH should specify a directory that is outside your app's directory and contain all the dependencies that your app imports.
But this messes up my project structure, which looks like this:
GOPATH/
└── src
└── github.com
└── username
└── myproject
├── app.yaml
├── cmd
│ └── myproject
│ └── main.go
├── handlers
│ └── api.go
├── mw
│ ├── auth.go
│ └── logger.go
└── vendor
Where the myproject directory is a git project and the vendor folder contains all dependencies.
Running gcloud deploy from the myproject directory where app.yaml file lives doesn't work because first, main.go file is not in the same directory and second (from the same doc):
you must be careful not to place your source code at or below your app's directory where the app.yaml file is located
What I ended up doing is building my own custom runtime instead, which turned out to be a very clean solution.
Simply generate the Dockerfile with the following command:
gcloud beta app gen-config --custom
Modify it, then specify runtime: custom in your app.yaml and deploy normally.
The trick here is of course that you're in control what gets copied where.
Here is my Dockerfile:
# Dockerfile extending the generic Go image with application files for a
# single application.
FROM gcr.io/google-appengine/golang
ENV GOPATH /go
# The files which are copied are specified in the .dockerignore file
COPY . /go/src/github.com/username/myproject/
WORKDIR /go/src/github.com/username/myproject/
RUN go build -o dist/bin/myproject ./cmd/myproject
# All configuration parameters are passed through environment variables and specified in app.yaml
CMD ["/go/src/github.com/username/myproject/dist/bin/myproject"]
Don't forget that App Engine expects your application listening on port 8080. Check out Building Custom Runtimes doc for more details.